Javascript 如何使用 jQuery 验证插件以编程方式检查表单是否有效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6658937/
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
how to check if a form is valid programmatically using jQuery Validation Plugin
提问by Jaime Hablutzel
I have a form with a couple of buttons and I'm using jQuery Validation Plugin from http://jquery.bassistance.de/validate/. I just want to know if there is any way I can check if the form is considered in valid state by jquery validation plugin from anywhere in my javascript code.
我有一个带有几个按钮的表单，我正在使用来自http://jquery.bassistance.de/validate/ 的jQuery 验证插件。我只想知道是否有任何方法可以检查我的 javascript 代码中的任何位置的 jquery 验证插件是否认为表单处于有效状态。
回答by Andrew Whitaker
Use .valid()from the jQuery Validation plugin:
使用.valid()从jQuery验证插件：
$("#form_id").valid();
Checks whether the selected form is valid or whether all selected elements are valid. validate() needs to be called on the form before checking it using this method.
检查选定的表单是否有效或是否所有选定的元素都有效。在使用此方法检查表单之前，需要在表单上调用validate()。
Where the form with id='form_id'is a form that has already had .validate()called on it.
其中表单 withid='form_id'是一个已经.validate()调用过它的表单。
回答by mikemaccana
2015 answer:we have this out of the box on modern browsers, just use the HTML5 CheckValidity APIfrom jQuery. I've also made a jquery-html5-validity moduleto do this:
2015 年回答：我们在现代浏览器上开箱即用，只需使用jQuery的HTML5 CheckValidity API。我还制作了一个jquery-html5-validity 模块来做到这一点：
npm install jquery-html5-validity
Then:
然后：
var $ = require('jquery')
require("jquery-html5-validity")($);
then you can run:
然后你可以运行：
$('.some-class').isValid()
true
回答by antongorodezkiy
@mikemaccana answer is useful.
@mikemaccana 的回答很有用。
And I also used https://github.com/ryanseddon/H5F. Found on http://microjs.com. It's some kind of polyfill and you can use it as follows (jQuery is used in example):
而且我还使用了https://github.com/ryanseddon/H5F。在http://microjs.com 上找到。它是某种 polyfill，您可以按如下方式使用它（示例中使用了 jQuery）：
if ( $('form')[0].checkValidity() ) {
// the form is valid
}
回答by ysrb
回答by juan.benavides
iContribute: It's never too late for a right answer.
iContribute：给出正确答案永远不会太晚。
var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
form.submit();
}else{
console.log("Required field missing.");
}
This way the basic HTML5 validation for 'required' fields takes place without interfering with the standard submit using the form's 'name' values.
通过这种方式，“必填”字段的基本 HTML5 验证不会干扰使用表单的“名称”值的标准提交。
回答by Matias Medina
For a group of inputs you can use an improved version based in @mikemaccana's answer
对于一组输入，您可以使用基于@mikemaccana 的答案的改进版本
$.fn.isValid = function(){
var validate = true;
this.each(function(){
if(this.checkValidity()==false){
validate = false;
}
});
};
now you can use this to verify if the form is valid:
现在您可以使用它来验证表单是否有效：
if(!$(".form-control").isValid){
return;
}
You could use the same technique to get all the error messages:
您可以使用相同的技术来获取所有错误消息：
$.fn.getVelidationMessage = function(){
var message = "";
var name = "";
this.each(function(){
if(this.checkValidity()==false){
name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
}
})
return message;
}
回答by Kazim Noorani
For Magento, you check validation of form by something like below.
对于 Magento，您可以通过如下方式检查表单验证。
You can try this:
你可以试试这个：
require(["jquery"], function ($) {
$(document).ready(function () {
$('#my-button-name').click(function () { // The button type should be "button" and not submit
if ($('#form-name').valid()) {
alert("Validation pass");
return false;
}else{
alert("Validation failed");
return false;
}
});
});
});
Hope this may help you!
希望这可以帮助你！
