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">

上面的代码已经正确吗？

我的想法是禁止提交表单，但是我将通过调用AJAX在数据库上运行一些更新/插入。 如果我擦除了 rules JS的一部分，我可以很好地运行AJAX。但是，执行上述操作并没有验证我的输入字段，即使该字段为空，AJAX仍然可以运行！

如果我将required放在HTML input上，是否有必要在JS上重复required规则？在这样的情况下（当表单分离并且我正在使用jQuery表单验证时）放置required的最佳实践是什么？
我在上面做的正确吗？我假设由于仅在单击提交按钮后才触发表单验证，因此我放置了$('html5submit').click(function(){});部分以知道何时触发验证。

Answer 1

我不确定您要达到的目标。但是您可以在jQuery中添加一个验证表单是否正确的函数，称为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

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

关于使验证器工作，修复这些问题将使其起作用：

您需要将输入元素包装在form元素中，这就是jquery验证器的工作原理。
删除.validate（）使用的json对象中的分号

执行此操作将为您提供以下结果，该结果将起作用，并防止在为空时提交表单。

$('#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事件处理程序并将其替换为准备好文档的事件处理程序。
当您已经在required的{{1}}对象中声明了rules时，可以删除相应的HTML5属性。为了保持一致，您还应该删除.validate() HTML5属性，并在maxlength方法中进行声明。使用此插件时，将自动禁用所有HTML5验证。如果您希望通过HTML5属性声明所有规则，则应将其从.validate()中删除，该插件仍将其视为有效规则。这只是我建议的最佳实践，因为在进行故障排除时请使用different rules in different locations leads to confusion。
您的.validate()函数结尾处有一个分号;，导致语法错误。

工作代码：

JavaScript：

submitHandler

HTML：

$(document).ready(function() {

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

});

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

更多信息：

有关此插件的基本用法以及最佳做法，请参见SO Wiki page中的jquery-validate标签。

Official Documentation here。

使用jQuery.validate（）验证HTML5分隔的表单

3 个答案: