jQuery validate: отправка формы только после проверки полей

Question

Я использую код ниже для проверки своей формы.Проверка проходит отлично, но у меня есть проблема при отправке формы.И проблема в том, что форма отправляется в php-файл каждый раз, когда нажимается кнопка «Отправить форму», независимо от того, была ли форма не подтверждена.

Как я могу это исправить?

Я изучал submitHandler, но я не знаю, как использовать его с ajax и сериализовать ..

Большое спасибо!

<script>
$(document).ready(function(){
   $("#form").validate({
      rules: {
         name: {
           required: true
         },
         lname: {
           required: true
         }

      },
      messages: {
         name: {
           required: "* required"
         },
         lname: {
           required: "* required"
         }
      }

   }); //end validate

  $('#form').submit(function() {

    theUrl = 'form.php';

     var params = $(this).serialize();
    $.ajax ({
            type: "POST",
            url: theUrl,
            data: params,
            processData:false,
            async:false,
            success: function(result) {

                //if (data != "") alert (data);
            }
    });
    //return false;
  }); //end submit

});    //end document ready 



</script>

Answer 1

Вам необходимо разместить код запроса AJAX в параметре submitHandler плагина validate. В настоящее время AJAX-запрос выполняется для события submit() параллельно с любым результатом проверки. Попробуйте это:

$(document).ready(function(){
    $("#form").validate({
        rules: {
            name: { required: true },
            lname: { required: true }
        },
        messages: {
            name: { required: "* required" },
            lname: { required: "* required" }
        },
        submitHandler: function(form) {
            theUrl = 'form.php';
            var params = $(form).serialize();

            $.ajax ({
                type: "POST",
                url: theUrl,
                data: params,
                processData: false,
                async: false,
                success: function(result) {
                    //if (data != "") alert (data);
                }
            });
        }
    }); //end validate
});

Дополнительная информация о параметре submitHandler.