我有一个带有几个按钮的表单,并且正在使用http://jquery.bassistance.de/validate/中的 jQuery Validation Plugin 。我只想知道是否有任何方法可以从我的JavaScript代码中的任何位置检查jquery验证插件是否将该表单视为有效状态。
我有一个带有几个按钮的表单,并且正在使用http://jquery.bassistance.de/validate/中的 jQuery Validation Plugin 。我只想知道是否有任何方法可以从我的JavaScript代码中的任何位置检查jquery验证插件是否将该表单视为有效状态。
Answers:
使用.valid()
从jQuery验证插件:
$("#form_id").valid();
检查所选表单是否有效或所有所选元素是否有效。使用此方法检查表单之前,需要在表单上调用validate()。
其中的with id='form_id'
表单是已经.validate()
调用过的表单。
:)
TypeError valid() not a function
插件添加到您的文件,因为它的插件不包括在jQuery库中,例如。<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
2015年答案:我们已经在现代浏览器中提供了开箱即用的功能,只需使用jQuery 的HTML5 CheckValidity API。我还制作了一个jquery-html5-validity模块来执行此操作:
npm install jquery-html5-validity
然后:
var $ = require('jquery')
require("jquery-html5-validity")($);
然后您可以运行:
$('.some-class').isValid()
true
valid
函数,因为它不会调用validate
函数并验证您的表单。
@mikemaccana答案很有用。
而且我还使用了https://github.com/ryanseddon/H5F。在http://microjs.com上找到。这是一种polyfill,您可以按以下方式使用它(示例中使用jQuery):
if ( $('form')[0].checkValidity() ) {
// the form is valid
}
iContribute:正确的答案永远不会太晚。
var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
form.submit();
}else{
console.log("Required field missing.");
}
这样,就可以对“必填”字段进行基本的HTML5验证,而不会干扰使用表单的“名称”值的标准提交。
对于一组输入,您可以使用基于@mikemaccana答案的改进版本
$.fn.isValid = function(){
var validate = true;
this.each(function(){
if(this.checkValidity()==false){
validate = false;
}
});
};
现在您可以使用它来验证表单是否有效:
if(!$(".form-control").isValid){
return;
}
您可以使用相同的技术来获取所有错误消息:
$.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;
}
对于Magento,您可以通过以下类似方式检查表单的验证。
您可以尝试以下方法:
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;
}
});
});
});
希望对您有所帮助!