按钮单击时的 jQuery 表单验证答案

【问题标题】：jQuery form validation on button click按钮单击时的 jQuery 表单验证
【发布时间】：2012-12-02 17:20:33
【问题描述】：

我有一个简单的页面，其中包含一个表单和一个表单外的按钮。我正在尝试验证按钮单击时的表单。我在 document.onready 函数中添加了表单验证规则。但是，该表格未得到验证。

HTML:-

<html>
<head>
   <script src="lib/jquery1.5.2.js"></script>
   <script src="lib/jquery.validate.js"></script>
   <script src="lib/myjs.js"></script>
</head>
<body>

<form id="form1" name="form1"> 
     Field 1: <input id="field1" type="text" class="required">
</form>

<div>
    <input id="btn" type="button" value="Validate">
</div>

</body>
</html>

JS:-

$(document).ready(function(){

$("#form1").validate({
   rules: {
     field1: "required"
   },
   messages: {
     field1: "Please specify your name"

   }
})

$('#btn').click(function() {
 $("#form1").validate();  // This is not working and is not validating the form
});

});

知道有什么问题吗？

【问题讨论】：

您是否收到 JavaScript 错误？
您使用什么插件进行验证？
我正在使用 jquery 1.5.2.js 和 jquery.validate.js
致评论者：click 处理程序内的.validate() 不起作用，因为它只是重新初始化插件。使用.valid() 强制验证。

标签： jquery jquery-validate

【解决方案1】：

在您的click 处理程序中，错误是.validate() 方法；它只初始化插件，不验证form。

要消除在form 中使用submit 按钮的需要，请使用.valid() 来触发验证检查...

$('#btn').on('click', function() {
    $("#form1").valid();
});

jsFiddle Demo

.validate() - 在 DOM 就绪时初始化插件（带选项）一次。

.valid() - 检查验证状态（布尔值）或随时在form 上触发验证测试。

否则，如果您在form 容器中有一个type="submit" 按钮，则不需要特殊的click 处理程序和.valid() 方法，因为插件会自动捕获它。

Demo without click handler

编辑：

您的 HTML 中还有两个问题...

<input id="field1" type="text" class="required">

在.validate() 中声明规则时不需要class="required"。这是多余的和多余的。
缺少name 属性。规则在.validate() 中由它们的name 声明。该插件依赖于唯一的 name 属性来跟踪输入。

应该是……

<input name="field1" id="field1" type="text" />

【讨论】：

我编辑了您的答案，使其适用于不同类型的表单结构。 stackoverflow.com/a/28723145/2615737
我觉得你说的既多余又多余很讽刺。
工作就像一个魅力，非常感谢@Sparky
我使用<input name="field1" id="field1" type="text" required />属性而不是class="required"，它会自动进入验证脚本
@ArtFranco，此插件允许您按类或 HTML5 属性声明规则。无论如何，您一定错过了答案的重点......只要在.validate() 中定义规则，就不需要内联属性。

【解决方案2】：

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            field1: "required"
        },
        messages: {
            field1: "Please specify your name"
        }
    })
});

<form id="form1" name="form1">
     Field 1: <input id="field1" type="text" class="required">
    <input id="btn" type="submit" value="Validate">
</form>

你也在使用 type="button"。而且我不确定您为什么应该将提交按钮分开，将其放在表单中。这样做更合适。这应该可以。

【讨论】：

是的。但是我至少可以拿回我的选票吗？哈哈只是一个小错误，也是我的疏忽。 ;p ...我从来没有说过这是错误的，我只是说这样更干净。一般来说。
为什么总是挑毛病？只是试图通过提供一个可行的替代方案来提供帮助，如果事实证明这是他正在寻找的东西，他可以尽快使用它。这不像我在拖钓。你知道，交换 cmets 是一个漫长的过程。最好看看光明的一面，伙计。
SO 是关于特定问题的高质量答案......不多不少。

【解决方案3】：

您还可以使用按钮标签

实现其他方式

根据新的 html5 属性，您还可以添加类似的表单属性

<form id="formId">
    <input type="text" name="fname">
</form>

<button id="myButton" form='#formId'>My Awesome Button</button>

所以按钮将附加到表单上。

这应该与 jQuery 的 validate() 插件一起使用：

var validator = $( "#formId" ).validate();
validator.element( "#myButton" );

它也适用于 input 标签

来源：

https://developer.mozilla.org/docs/Web/HTML/Element/Button

【讨论】：