Может ли плагин JQuery.Validate предотвратить отправку формы Ajax

Question

Я использую плагин формы JQuery (http://malsup.com/jquery/form/) для обработки ajax-формы. У меня также есть JQuery.Validate (http://docs.jquery.com/Plugins/Validation)) для проверки на стороне клиента.

Что я вижу, так это то, что проверка не проходит, когда я этого ожидаю, однако это не мешает отправке формы. Когда я использовал традиционную форму (т. Е. Не-ajax), проверка не удалась, и форма вообще не могла быть отправлена ​​... что является моим желаемым поведением.

Я знаю, что проверка правильности подключена, так как сообщения проверки все еще появляются после того, как произошла передача ajax.

Так чего мне не хватает, что мешает моему желаемому поведению? Пример кода ниже ....

<form id="searchForm" method="post" action="/User/GetDetails">
        <input id="username" name="username" type="text" value="user.name" />  
        <input id="submit" name="submit" type="submit" value="Search" />   
</form>
<div id="detailsView">
</div>  

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };
    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
    rules: {
    username: {required:true}},
    messages: {
    username: {required:"Username is a required field."}}
    });
</script>

Answer 1

Вам нужно добавить функцию обратного вызова для использования с событием beforeSubmit при инициализации ajaxForm ():

var options = {
        beforeSubmit: function() {
            return $('#searchForm').validate().form();
        },
        target: '#detailsView'
    };

Теперь он знает, что нужно проверить результат проверки, прежде чем он отправит страницу.

Answer 2

... ну, это было давно, поэтому моя ситуация немного изменилась. В настоящее время у меня есть опция submitHandler, переданная плагину Validate (). В этом обработчике я вручную использую ajaxSubmit. Я думаю, скорее обходной путь, чем ответ. Надеюсь, это поможет.

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({target: "#result"});
    }
});

Answer 3

$('#contactform').ajaxForm({
  success : FormSendResponse, 
  beforeSubmit:  function(){
    return $("#contactform").valid();
  }
});


$("#contactform").validate();   

Вышеупомянутый код работал нормально для меня.

Answer 4

хорошо, это старый вопрос, но я поставлю здесь наше решение для потомков. я лично классифицирую это как хак-троицу, но по крайней мере это не хак-таку-манджаро

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };

// -- "solution" --
$('#searchForm').submit(function(event) {
  this.preventDefault(event); // our env actually monkey patches preventDefault
                              // impl your own prevent default here
                              // basically the idea is to bind a prevent default
                              // stopper on the form's submit event
});
// -- end --

    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
      rules: {
      username: {required:true}},
      messages: {
      username: {required:"Username is a required field."}}
    });
</script>

Answer 5

Также убедитесь, что все ваши поля ввода имеют атрибут «name» и атрибут «id». Я заметил, что плагин проверки jquery не работает правильно без них.

Answer 6

Просто как первый проход, мне интересно, почему линия

$("form").validate({

не относится к $ ("searchform"). Я не искал и не пробовал, но это, похоже, несоответствие. Не хотите ли позвонить в валидацию в соответствующей форме?

В любом случае, если это совершенно неправильно, то ошибка не сразу очевидна. :)

Answer 7

Может быть вернуть ложь; на бланке поможет? :) Я имею в виду:

<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;">