jQuery 验证成功指标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13544944/
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 validate success indicator
提问by user791187
Ok, I think I have this wrong...but I cant seem to get the answer. Im just trying to create a success checkmark or indicator that what the user has entered into the input form is valid. The commented out portion of the script is the idea of what Im trying to achieve. Here is the script:
好吧，我想我错了……但我似乎无法得到答案。我只是想创建一个成功的复选标记或指示符，表明用户在输入表单中输入的内容是有效的。脚本的注释部分是我试图实现的想法。这是脚本：
$('document').ready(function(){
$('form').validate({
rules: {
a: {required:true, minlength:2},
b: {required:true}
},
messages: {
a: {required: "enter your name!"},
b: {required: "enter the date!"}
},
errorPlacement: function(error, element) {
if(element.attr('name') == 'a'){
$('#name').html(error);
}
if(element.attr('name') == 'b'){
$('#date').html(error);
}
},
success: function(error){
//a: {$('#name').html('nice name!');},
//b: {$('#date').html('nice date!');}
},
debug:true
});
$('#a').blur(function(){
$("form").validate().element("#a");
});
});
And here is the html:
这是 html：
<form action="#" id='commentForm'>
<input type="text" name="a" id="a">
<input type="text" name="b" id="b">
<button type="submit">Validate!</button>
<div id="date" style="border:1px solid blue;"></div>
<div id="name" style="border:1px solid red;"></div>
</form>
Last, but not least, here is the jsfiddle:
最后但并非最不重要的是，这里是 jsfiddle：
http://jsfiddle.net/mmw562/wQxQ8/8/
http://jsfiddle.net/mmw562/wQxQ8/8/
Many thanks in advance for your help!
非常感谢您的帮助！
回答by Sparky
The part inside success:would be a class name or a JavaScript callback function, which looks just like any other function. But instead, you wrote it like an array of plugin options. Also, since it's called "success", why would errorbe passed into it when there wouldn't be any? As per the documentationit should look something like this...
里面的部分success:将是一个类名或一个 JavaScript 回调函数，它看起来就像任何其他函数。但是相反，您将其编写为一组插件选项。还有，既然叫“成功”，为什么没有的时候还要error传进去呢？ 根据文档，它应该看起来像这样......
success: function(label){
label.addClass("valid").text("Ok!");
},
http://docs.jquery.com/Plugins/Validation/validate#toptions
http://docs.jquery.com/Plugins/Validation/validate#toptions
If specified, the error label is displayed to show a valid element. If a String is given, its added as a class to the label. If a Function is given, its called with the label (as a jQuery object) as its only argument. That can be used to add a text like "ok!".
如果指定，则显示错误标签以显示有效元素。如果给出字符串，则将其作为类添加到标签中。如果给定了一个函数，则使用标签（作为 jQuery 对象）作为其唯一参数调用它。这可用于添加诸如“ok！”之类的文本。
Here is your jsFiddle slightly modified to show the basic concept. Perhaps you can use a checkmark as a background-imagein the CSS of the .validclass.
这是您的 jsFiddle 稍微修改以显示基本概念。也许你可以使用一个对勾一background-image中的CSS的.validclass。
回答by Candide
Here's a possible solution:
这是一个可能的解决方案：
$('document').ready(function(){
$('form').validate({
rules: {
a: {required:true, minlength:2},
b: {required:true}
},
messages: {
a: {required: "enter your name!"},
b: {required: "enter the date!"}
},
errorPlacement: function(error, element) {
if(element.attr('name') == 'a'){
$('#name').html(error);
}
if(element.attr('name') == 'b'){
$('#date').html(error);
}
},
success: function(label) {
var parentId = $(label).parent().attr("id");
switch(parentId) {
case "name":
$(label).html("nice name");
break;
case "date":
$(label).html("nice date");
break;
}
},
debug:true
});
$('#a').blur(function(){
$("form").validate().element("#a");
});
});
Updated fiddle: http://jsfiddle.net/wQxQ8/13/
更新小提琴：http: //jsfiddle.net/wQxQ8/13/
回答by Adel Mourad
To answer the title, Not your actual question:
要回答标题，不是您的实际问题：
This is how to check if JQuery validation for a certain input is success or fail, It returns true / false boolean values :
这是如何检查某个输入的 JQuery 验证是成功还是失败，它返回 true / false 布尔值：
$("[name='ConfirmCode']").valid(); // RETURNS true/false
example:
例子：
if (!$("[name='ConfirmCode']").valid())
return;
To check the validation status for the entire form use:
要检查整个表单的验证状态，请使用：
$('form').valid(); // RETURNS true/false
To include the hidden inputs in the validation process results:
要在验证过程结果中包含隐藏输入：
$('form').validate({
ignore: []
});
