Question

我使用jquery验证（http://bassistance.de/jquery-plugins/jquery-plugin-validation/）进行表单验证。以下是我的代码的一些片段：

HTML：

<form id="formID" action="/processForm" method="post">
  ...
  <input id="name" type="text" name="name" size="10" />
  <input id="username" type="text" name="username" size="10" />
  ...
<input type="submit" value="Submit" />

jQuery的：

$("#formID").validate({
  onkeyup:false,

  rules: {
    name: {required: true},
    username: {required: true, checkUsername: true}
    ...
  },
  messages: {
    name: {required: "Must fill"},
    username: {required: "Must fill", checkUsername: "Username unavailable"},
    ...
  }

});

// Check if username exists
$.validator.addMethod('checkUsername', function(username) {
  var postURL = "/checkUsername";
  $.ajax({
    ...
  });
  return ...;
}, '');


// Submit the form by Ajax
$(document).ready(function() {
  $('.formID').ajaxForm({
    success: function(returnData) {
      $('#content').html(returnData);
    }
  });
});

奇怪的是，我可以将一些必填字段留空或取消选中，表单仍然可以提交。如果留空，某些必填字段可能会阻止提交，但其他字段则不会。有没有人遇到同样的奇怪问题？或者我在这里做错了什么？

顺便说一句，如果我单击提交按钮而不填写任何内容，则所有必填字段都会正确显示错误消息。但其中一些只是不会阻止提交表单。请帮忙。

编辑：底部的Ajax表单提交功能似乎不起作用。我该如何纠正？

Answer 1

总结一下，为了同时使用表单验证和ajax提交，请将“submitHandler”添加到validate（）函数中：

$("#formID").validate({
  onkeyup:false,

  rules: {
    ...
  },

  messages: {
    ...
  },

  // Submit the form
  submitHandler: function(form) {
    theUrl = '/processData';
    var params = $(form).serialize();
    $.ajax ({
      type: "POST",
      url: theUrl,
      data: params,
      processData: false,
      async: false,
      success: function(returnData) {
        $('#content').html(returnData);
      }
    });
  }

});

Answer 2

我有同样的问题，我做的是：
1）更改提交按钮：
来自：

<input type="submit" class="savebutton" id="save" value="Save" />

to

 <input type="button" class="savebutton" id="save" value="Save" />  

(the save button is not going to submit the form when is click it).

2）将我的验证脚本更改为：

<script type="text/javascript">
 $(document).ready(function() {
   $('#form').validate({ 
     rules: {
         qty: {
    max: 100,
            required: true
         }
    },
    messages: {
        qty: "please check quantity",
    }
});

 $( "#save" ).click(function() {
if ($('#form').validate())$('#form').submit();
 });
});
</script>

当点击“保存”按钮时，它会验证表单。如果验证是正确的，那么它将提交表格。

Answer 3

而不是：

// Submit the form by Ajax
$(document).ready(function() {
  $('.formID').ajaxForm({
    success: function(returnData) {
      $('#content').html(returnData);
    }
  });
});

使用Validate插件的submitHandler选项，如下所示：

$("#formID").validate({
    //all your other options
    submitHandler: function(form) {
      $(form).ajaxForm({
        success: function(returnData) {
          $('#content').html(returnData);
        }
      });
    }
 });

jQuery验证：一些必填字段未填写但表单仍可提交

3 个答案: