Question

我有一个简单的页面，表单和窗体外的按钮。我试图在按钮单击上验证表单。我已经在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
});

});

知道什么是错的吗？

Answer 1

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

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

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

jsFiddle Demo

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

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

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

Demo without click handler

修改：

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

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

在class="required"内声明规则时，您不需要.validate()。这是多余的和多余的。

缺少name属性。规则由.validate()在name内声明。该插件依赖于唯一的name属性来跟踪输入。

应该......

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

Answer 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”。而且我不确定为什么你应该将提交按钮分开，将其放在表单中。这样做更合适。这应该有用。

Answer 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" );

它也使用输入标记

来源：

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

单击按钮时的jQuery表单验证

3 个答案:

来源：