Как проверить форму с помощью ajax перед отправкой в ​​jQuery?

Question

Я делаю это так:

...submit(function() {
    $.post(...,function() {
         validate();
    })
});

Но получается, что форма отправляется напрямую ...

Answer 1

Взгляните на плагин проверки jQuery .

Вот пример того, как его можно использовать:

$("#myForm").validate({
    rules: {
        command: 'required'
    },

    messages: {
        command: 'Please enter a command.'
    },

    submitHandler: function(form) {
        $(form).ajaxSubmit({
            success: function(data) { /* ... */ },
            url: form.action,
            dataType: 'json'
        });
    }
});

Answer 2

Если вы хотите, чтобы AJAXily выполнял проверку на стороне сервера без публикации формы на другой странице, вы можете сделать что-то подобное.Вместо того, чтобы связывать действие проверки для отправки, вы можете вместо этого сделать свою кнопку «отправить» просто типом «кнопки», а затем привязать свою проверку к событию клика.Как только он пройдет валидацию, вы можете двигаться дальше.

Например:

$('#myPseudoSubmitButton').click(function() {  
     // Send the form to the server side for validation  
     $.post('validation_script.php', { form inputs here }, function(data) {  
          if (data.validated) {
               // Perform some functionality that happens when the form validates
          }
          else {
               // Display an error message to the user
          }
     });
}, 'json');

Это, конечно, предполагает, что ваш скрипт валидации возвращает данные в формате JSON с атрибутом «validated».

Answer 3

вам нужно запретить отправку формы по умолчанию

http://api.jquery.com/event.preventDefault/

$("form").submit(function(event){
  event.preventDefault();
  if(valid())
  {
    $.post . . .
  }
});

Answer 4

Вам нужно будет захватить каждый элемент и выполнить его через проверку, а затем отправить форму позже.

Используйте $(id).value (для элементов id-d) или yourForm.someElementName.value (для name-dэлементы, если ваша форма name d yourForm).