Показать сообщение отдельно
  #6 (permalink)  
Старый 16.07.2017, 22:15
Новичок на форуме
Отправить личное сообщение для ovla Посмотреть профиль Найти все сообщения от ovla
 
Регистрация: 16.07.2017
Сообщений: 8

// verification
$(document).ready(function(){

    // Устанавливаем обработчик потери фокуса для всех полей ввода текста
    $('input#name, input#email, input#tel').unbind().blur( function(){
        // Для удобства записываем обращения к атрибуту и значению каждого поля в переменные
        var id = $(this).attr('id');
        var val = $(this).val();
        // После того, как поле потеряло фокус, перебираем значения id, совпадающее с id данного поля
        switch(id)
        {
            // Проверка поля "Имя"
            case 'name':
                var rv_name = /^[a-zA-Zа-яА-Я]+$/; // используем регулярное выражение
                // Eсли длина имени больше 2ух символов, оно не пустое и удовлетворяет рег. выражению,
                // то добавляем этому полю класс .not_error,
                if(val.length > 2 && val != '' && rv_name.test(val))
                {
                    $(this).addClass('not_error');
                    $(this).next('.error-box').text('')
                        .css('background-image','url(img/mark.png)')
                        .animate()
                        .animate();
                }
                
                // Иначе, мы удаляем класс not-error, и заменяем его на класс error, говоря о том что поле содержит ошибку валидации,
                // и ниже в наш контейнер выводим сообщение об ошибке и параметры для верной валидации
                else
                {
                    $(this).removeClass('not_error').addClass('error');
                    $(this).next('.error-box').html('')
                        .css('background-image','none')
                        .animate()
                        .animate();
                }
                break;
            // Проверка email
            case 'email':
                var rv_email = /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
                if(val != '' && rv_email.test(val))
                {
                    $(this).addClass('not_error');
                    $(this).next('.error-box').text('')
                        .css('background-image','url(img/mark.png)')
                        .animate()
                        .animate();
                }
                else
                {
                    $(this).removeClass('not_error').addClass('error');
                    $(this).next('.error-box').html('')
                        .css('background-image','none')
                        .animate()
                        .animate();
                }
                break;
            // Проверка поля "Сообщение"
            case 'tel':
                if(val != '' && val.length > 9 )
                {
                    $(this).addClass('not_error');
                    $(this).next('.error-box').text('')
                        .css('background-image','url(img/mark.png)')
                        .animate()
                        .animate();
                }
                else
                {
                    $(this).removeClass('not_error').addClass('error');
                    $(this).next('.error-box').html('')
                        .css('background-image','none')
                        .animate()
                        .animate();
						
                }
                break;
        } // end switch(...)
    }); // end blur()
	
	
    // Теперь отправим наше письмо с помощью AJAX
    $('#feedback-form').submit(function(e){ 
        // Запрещаем стандартное поведение для кнопки submit
        e.preventDefault();
		
        // После того, как мы нажали кнопку "Отправить", делаем проверку,
        // если кол-во полей с классов .not_error равно 3(так как у нас всего 3 поля), то есть все поля заполнены верно,
        // выполняем наш Ajax сценарий и отправляем письмо адресату
        if($('.not_error').length == 3)
        {
            // Eще одним моментов является то, что в качестве указания данных для передачи обработчику send.php, мы обращаемся $(this) к нашей форме,
            // и вызываем метод .serialize().
            // Это очень удобно, т.к. он сразу возвращает сгенерированную строку с именами и значениями выбранных элементов формы.
            $.ajax({
                url: 'send.php',
                type: 'post',
                data: $(this).serialize(),
                beforeSend: function(xhr, textStatus){
                    $('form#feedback-form :input').attr('disabled','disabled');
                },
                success: function(response){
                    $('form#feedback-form :input').removeAttr('disabled');
                    $('form#feedback-form :text, textarea').val('').removeClass('.not_error').next('.error-box').css('background-image','none');
					$('#feedback-form').trigger('reset');
					$('.wrap_form, .form').toggleClass('close_panel');
                }
            }); // end ajax({...})
            $('#send').prop("disabled", false);
        }
        else
        {
            $('#send').prop("disabled", true);
            return false;
        }
        // Иначе, если количество полей с данным классом не равно значению 3 мы возвращаем false,
        // останавливая отправку сообщения в невалидной форме
    }); // end submit()
});
Ответить с цитированием