0

我使用 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 表单提交功能似乎不起作用。我该如何纠正？

4

3 回答 3

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);
      }
    });
  }

});
于 2013-01-16T04:28:01.007 回答
1

我遇到了同样的问题，我所做的是：
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>

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

于 2013-12-18T23:35:44.647 回答
0

代替：

// 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);
        }
      });
    }
 });
于 2013-01-14T16:37:47.590 回答