使用 jQuery.validate() 验证 HTML5 分隔形式

Question

我有以下 JS 和 HTML:

$('#html5submit').click(function() {
  $('#html5form').validate({
    rules : { html5required: { required: true} },
    submitHandler: function(e) {
      $.post({
        //My AJAX here works just fine
      });
    };
  });
});

<form id = "html5form"></form>

<input form = "html5form" type = "text" name = "html5required" required maxlength = "200">
<input form = "html5form" id = "html5submit" type = "submit">

以上代码是否正确？

我的想法是禁止提交表单，但我会运行通过调用上述 [=] 在我的数据库中 updates/inserts 43=]。 如果我擦掉 rules 部分 JS，我可以运行 AJAX 就好了。但是，执行上述操作 并没有验证我的输入字段，即 AJAX 仍然运行即使该字段为空！！！

如果我将 required 放在我的 HTML input 上，是否有必要在我的 JS 上重复 required 规则？在这种情况下放置 required 的最佳做法是什么（当表单分开并且我正在使用 jQuery 表单验证时）？
我在上面所做的正确吗？我假设因为我只会在单击提交按钮时触发表单验证，所以我放置了 $('html5submit').click(function(){}); 部分以了解何时触发验证。

Answer 1

我不太确定您要实现的目标。但是可以在jQuery中添加一个函数validate if the form is not correct，叫做invalidHandler，看这里：

$(document).ready(function(){
 $('#html5form').validate({
 rules : { html5required: { required: true} 
 },
 invalidHandler: function(event, validator) {
 // Make ajax call here
 $.ajax();
 },
 submitHandler: function(e) {
   $.post({
     //My AJAX here works just fine
   });
  };
 });
}

在这种情况下，可以去掉提交按钮的onclick，因为提交表单后会自动验证表单。如果输入有所需的标签，则可以删除规则。只是玩弄它并使用 documentation.

Answer 2

向表单元素添加必需的属性将导致浏览器 'validating' 输入。但是只要用户进入浏览器的开发工具，他们就可以轻松地删除它。通过使用验证器，它已经更安全了，但并非不可能绕过此安全措施。唯一正确的验证方法是在 php 中验证，因为用户无法更改那里的代码。

至于让验证器工作，解决这些问题将使它起作用：

您需要将输入元素包装在表单元素中，这就是jquery验证器的工作方式。
删除 .validate()

这样做会得到以下结果，这将起作用并防止在留空时提交表单。

$('#html5submit').click(function() {
  $('#html5form').validate({
      rules : { 
      html5required: { 
        required: true
      } 
    },
    submitHandler: function(e) {
      $.post({
        //My AJAX here works just fine
      });
    } // There was a semicolon here!
  });
});

<form id = "html5form">
  <input form="html5form" type="text" name="html5required" maxlength="200">
  <input form="html5form" id="html5submit" type="submit">
</form>

希望对您有所帮助！

Answer 3

如评论中所述，您有一些问题...

要使此插件正常工作，所有 input 元素必须位于 <form> 容器内。没有解决方法。
.validate() 方法用于初始化表单上的插件，因此应该在页面加载时调用一次，而不是在每个 click 事件中调用。删除 click 事件处理程序并将其替换为文档就绪事件处理程序。
如果您已经在 .validate() 的 rules 对象中声明了 required，那么您可以删除相应的 HTML5 属性。为了保持一致性，您还应该删除 maxlength HTML5 属性并在 .validate() 方法中声明它。使用此插件时，所有 HTML5 验证都会自动禁用。如果您更喜欢通过 HTML5 属性声明所有规则，那么您应该将它们从 .validate() 中删除，插件仍会将它们作为有效规则选取。这只是我建议的最佳做法，因为在进行故障排除时。
您的 submitHandler 函数末尾有一个分号 ;，导致语法错误。

工作代码:

JavaScript:

$(document).ready(function() {

    $('#html5form').validate({
        rules: {
            html5required: {
                required: true,
                maxlength: 200
            }
        },
        submitHandler: function(e) {
            $.post({
                //My AJAX here works just fine
            });
        }
    });

});

HTML:

<form id="html5form">
    <input form="html5form" type="text" name="html5required">
    <input form="html5form" id="html5submit" type="submit">
</form>

工作演示：jsfiddle.net/s0qgdjm4/2

更多信息：

有关此插件的基本用法以及最佳实践，请参阅 SO Wiki page for the jquery-validate 标签。

Official Documentation here.

使用 jQuery.validate() 验证 HTML5 分隔形式

Validating HTML5 separated form with jQuery.validate()

jquery

jquery-validate