javascript JQuery - 表单验证 - Onblur
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9189910/
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 - Onblur
提问by user982853
Ok I have a form with jquery validation that works but I want to take it one step further. It validates using a plug in but only on submit. I am wondering if there is a way to get it to validate on blur so a person doesn't have to wait until they hit submit to know if they have an error.
好的，我有一个带有 jquery 验证的表单，但我想更进一步。它使用插件进行验证，但仅在提交时进行验证。我想知道是否有办法让它在模糊时进行验证，这样人们就不必等到他们点击提交才能知道他们是否有错误。
I downloaded this plugin:
我下载了这个插件：
http://docs.jquery.com/Plugins/Validation
http://docs.jquery.com/Plugins/Validation
I included the js plug in file at the top of the page and under that i have the js:
我在页面顶部包含了 js 插件文件，在它下面我有 js：
<script>
$(document).ready(function(){
$("#formid").validate();
});
</script>
The validation works fine when i submit the form. I am just wondering what i need to add to this in order for it to validate each field on blur.
当我提交表单时，验证工作正常。我只是想知道我需要添加什么，以便它验证模糊的每个字段。
If you need to see the js file you can look at it or download it here
如果需要查看js文件可以查看或者下载这里
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Also at the link towards the bottom of the page there are a bunch of comments. Some of these comments reference setting up blur i just didn't understand how to do it. Thank you for any help.
同样在页面底部的链接中有一堆评论。其中一些评论参考了设置模糊，我只是不明白该怎么做。感谢您的任何帮助。
回答by Ryley
The best way I can see is to use $.validate.element(selector)in the blur event for each element you want this behaviour for:
我能看到的最好方法是$.validate.element(selector)在每个元素的 blur 事件中使用此行为：
var v = $('#formid').validate();
Then setup blur events:
然后设置模糊事件：
$('#firstName').blur(function(){
v.element('#firstName');
});
See it in action here: http://jsfiddle.net/ryleyb/brUVZ/
在这里查看它的实际效果：http: //jsfiddle.net/ryleyb/brUVZ/
回答by ori
You can use the validator 'form' method, see documentation.
您可以使用验证器“表单”方法，请参阅文档。
This triggers form validation:
这会触发表单验证：
$('#formid').validate().form();
If you want it on blur you might use this:
如果你想模糊你可以使用这个：
$('#formid :input').blur(function() {
$('#formid').validate().form();
});
回答by Stephen Sprinkle
The current version of the plugin has a function called 'validateOnBlur' which will do what you're asking.
该插件的当前版本有一个名为“validateOnBlur”的函数，它可以满足您的要求。
Your code should look like this if you've applied the id of #formidto the form.
如果您已将 id 应用#formid到表单，您的代码应该如下所示。
<script>
$('#formid').validateOnBlur();
</script>
For some solid documentation on this head to his github page -- https://github.com/victorjonsson/jQuery-Form-Validator
有关此头的一些可靠文档到他的 github 页面 - https://github.com/victorjonsson/jQuery-Form-Validator
回答by NareshK
I know its already too late but still I want to add to this. Very easy way to set the validation for submit and blur event is:
我知道已经太晚了，但我仍然想补充一点。设置提交和模糊事件验证的非常简单的方法是：
$("#MainForm").validate({
onfocusout: function (element) {
if ($(element).valid())
{
$(element).removeClass('input-error').addClass('input-valid');
}
},
invalidHandler: function (event, validator) {
$.each(validator.errorList, function (index, error) {
$(error.element).addClass('input-error');
});
},
showErrors: function () {
//This function is kept blank so as to hide the default validation messages.
}
});
CSS
CSS
.input-error {
border-color: #FF1919;
box-shadow: 0px 0px 10px #FF1919;
}
.input-valid {
border-color:#009500;
box-shadow: 0px 0px 10px #009500;
}
Give it a try.
试一试。
回答by Nicola Peluchetti
You should set the onfocusout optionto true (scroll down to see it)
您应该将onfocusout 选项设置为 true（向下滚动以查看）
$("#formid").validate({
rules: {
// simple rule, converted to {required:true}
required: "required",
},
onfocusout: true
});
回答by Barry Chapman
<script>
$(document).ready(function(){
$("#formid input, #formid select, #formid textarea").blur(function() { $('#formid').validate(); });
});
</script>
