Как объединить bquistance.de JQuery валидатор с JQuery AJAX

Question

У меня есть форма, которую я хотел бы проверить на стороне клиента, а затем опубликовать через ajax. У меня есть форма, работающая с использованием одного или другого, но я не уверен, как их объединить. Посетив страницы ajax bassistance, я остаюсь более растерянным, чем раньше.

Клиентская сторона:

jQuery(document).ready(function() {
jQuery("#this_form").validate({
    });
});

Ajax:

jQuery("#submit").click(function(){

    var formData = jQuery("#this_form").serializeArray();

    jQuery.ajax({
        type: "POST",
        url: "process_form.php",
        cache: false,
        data: formData,
        success: onSuccess,
        error: onError
    });

    return false;
});

Что я хотел бы знать, так это как я могу активировать ajax при успешной проверке, комбинируя два метода выше. Я спрашиваю, исходя из предположения, что существует прямой способ сделать это, поскольку все найденные мной фрагменты мало похожи на приведенный выше код.

Пробовал это:

jQuery(document).ready(function() {
   $('#submit').live('click', function(event){
       event.preventDefault();

    var form = $('#this_form');
    if(form.valid()){
        var formData = jQuery("#this_form").serializeArray();
             jQuery.ajax({
                type: "POST",
                url: "process_form.php",
                cache: false,
                data: formData,
                success: onSuccess,
                error: onError
                    });
               return false;
               };
   });
});

Но это не проверяет обязательное поле, а только выполняет ajax. Я предполагаю, что мне нужен способ, чтобы валидатор возвращал true, не отправляя форму, а затем вызывая событие ajax, но я не знаю, как это построить.

Спасибо

Answer 1

Отсортировано так:

jQuery (документ) .ready (function () {

  jQuery("#this_form").validate({
        debug: true,    
        rules:{
                    // add rules here
        },
        messages: {
            //add messages here
            }
        },
        submitHandler: function(form){
            jQuery.ajax({
                type: "POST",
                url: "processform.php",
                cache: false,
                data: jQuery(form).serialize(),
                success: onSuccess,
                error: onError,
            });
        }           
  });
});

function onSuccess(data, status)
{
data = jQuery.trim(data);
jQuery("#return_message").html(data);
}

function onError(data, status)
{
// handle an error
}

Answer 2

Попробуйте:

$("#button").click(function(){
   if($("#form").valid()){
      //Ajax submission
    }
});

И в свою кнопку вы можете добавить type="button" для предотвращения автоматической отправки.