单击按钮时的 jQuery 表单验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13671710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery form validation on button click
提问by ajithmanmu
I have a simple page with a form and a button outside the form. I am trying to validate the form on the button click. I have added the rules for validation of the form on the document.onready function. However the form is not getting validated.
我有一个简单的页面，其中有一个表单和一个表单外的按钮。我正在尝试在单击按钮时验证表单。我在 document.onready 函数上添加了表单验证规则。但是，该表单未得到验证。
HTML:-
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:-
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
});
});
Any idea what's wrong?
知道出了什么问题吗？
回答by Sparky
Within your clickhandler, the mistake is the .validate()method; it only initializes the plugin, it does not validate the form.
在您的click处理程序中，错误在于.validate()方法；它只初始化插件，它不验证form.
To eliminate the need to have a submitbutton within the form, use .valid()to trigger a validation check...
为了消除在 内有一个submit按钮的需要form，使用.valid()来触发验证检查...
$('#btn').on('click', function() {
$("#form1").valid();
});
.validate()- to initialize the plugin (with options) onceon DOM ready.
.validate()-初始化插件（含期权）曾经在DOM准备就绪。
.valid()- to check validation state (boolean value) or to trigger a validation test on the format any time.
.valid()- 检查验证状态（布尔值）或随时触发验证测试form。
Otherwise, if you had a type="submit"button within the formcontainer, you would not need a special clickhandler and the .valid()method, as the plugin would capture that automatically.
否则，如果容器中有一个type="submit"按钮，则form不需要特殊的click处理程序和.valid()方法，因为插件会自动捕获它。
EDIT:
编辑：
You also have two issues within your HTML...
您的 HTML 中还有两个问题...
<input id="field1" type="text" class="required">
You don't need
class="required"when declaring rules within.validate(). It's redundant and superfluous.The
nameattribute is missing. Rules are declared within.validate()by theirname. The plugin depends upon uniquenameattributes to keep track of the inputs.
你不需要
class="required"内宣布规则时.validate()。这是多余的和多余的。name缺少该属性。规则.validate()由它们的name. 该插件依赖于独特的name属性来跟踪输入。
Should be...
应该...
<input name="field1" id="field1" type="text" />
回答by Wap
$(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>
You are also you using type="button". And I'm not sure why you ought to separate the submit button, place it within the form. It's more proper to do it that way. This should work.
您也在使用 type="button"。我不知道为什么你应该分开提交按钮，把它放在表单中。这样做更合适。这应该有效。
回答by Daryl Cluzel
You can also achieve other way using buttontag
您还可以使用按钮标签实现其他方式
According new html5 attribute you also can add a form attribute like
根据新的 html5 属性，您还可以添加一个表单属性，如
<form id="formId">
<input type="text" name="fname">
</form>
<button id="myButton" form='#formId'>My Awesome Button</button>
So the button will be attached to the form.
所以按钮将附加到表单上。
This should work with the validate() plugin of jQuery like :
这应该与 jQuery 的 validate() 插件一起使用，例如：
var validator = $( "#formId" ).validate();
validator.element( "#myButton" );
It's working too with inputtag
它也适用于输入标签
