52

我有一个带有表单和表单外按钮的简单页面。我正在尝试验证按钮单击时的表单。我在 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
});

});

知道有什么问题吗？

4

3 回答 3

137

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

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

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

jsFiddle 演示

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

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

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

click没有处理程序的演示

编辑：

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

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

  • class="required"在.validate(). _ 这是多余的和多余的。

  • 缺少该name属性。规则.validate()由它们的name. 该插件依赖于独特的name属性来跟踪输入。

应该...

<input name="field1" id="field1" type="text" />
于 2012-12-02T17:34:37.800 回答
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"。而且我不确定您为什么应该将提交按钮分开，将其放在表单中。这样做更合适。这应该有效。

于 2012-12-02T17:45:11.907 回答
0

您还可以使用按钮标签实现其他方式

根据新的 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" );

它也适用于输入标签

来源 ：

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

于 2018-05-31T15:20:44.347 回答