我有一个表单，我正在尝试使用jquery验证插件。我的问题是我无法访问成功回调中的标签。我可以得到label.attr('for')，但当我尝试label.attr('id')或label.html()时，我会得到未定义的。
这是我的验证调用：
<script type="text/javascript">
$(document).ready(function() {
$('#personal_info').validate({
rules: {
LastName: "required",
Age: "required"
},
messages: {
LastName: "",
Age: ""
},
errorPlacement: function(error, element) {
console.log('element.attr = '+element.attr('name'));
if(element.attr('name') == 'Age') {
console.log('element = '+element.parents().siblings('label').html());
element.parents().siblings('label').removeClass('highlight').addClass('warning');
}
//error.insertBefore(element.parent().children("br"));
},
// specifying a submitHandler prevents the default submit, good for the demo
submitHandler: function() {
document.personal_info.submit();
},
validClass: "checkmark",
// set this class to error-labels to indicate valid fields
success: function(label) {
console.log('the label for = '+label.attr('for'));
console.log('the label id = '+label.attr('id'));
}
});
});
</script>
这是我的一段html:
<label for="Age" id="age18" class="highlight"> Are you at least 18 years of age?</label>
<table id="OnlineAppWizard_InputAge18" border="0">
<tr>
<td>
<input id="Age18_yes" type="radio" name="Age" value="Yes" <?
if ($Age18 == "Yes") {
print "checked";
}
?>/>
<label for="Age18_yes">Yes</label>
</td>
<td>
<input id="Age18_no" type="radio" name="Age" value="No" <?
if ($Age18 == "No") {
print "checked";
} ?>/>
<label for="Age18_no">No</label>
</td>
</tr>
</table>
当我点击其中一个单选按钮时，这就是firebug控制台中出现的内容：
the label for = Age
the label id = undefined
你可以从html片段中看到，标签标签的"for"属性为"Age"，也有一个"id"属性"age18">
传递给success回调的label参数不是您认为的标签。jQuery Validation插件为每个元素生成错误标签以显示错误消息。正是这个生成的标签被传递给success回调。您可以通过添加console.log(label);作为回调的第一行来看到这一点。它将返回以下内容：
[<label for="Age" generated="true" class="error" style="display: inline; "></label>]
仅供参考，该标签是在验证器的showLabel方法中创建的。它也是作为errorPlacement方法的error参数传递的相同元素。通常，error元素将被附加到导致错误(即未能验证)的表单元素。
要从success回调访问原始标签，您需要一种更直接的方法。
一种解决方案，非常具体地针对这个特定的标签，就是简单地通过它的ID访问它，例如
if(label.attr('for') === 'Age') {
$('#age18')... // do something to the label
}
一个更通用的解决方案是：
$('#personal_info').children('[for="' + label.attr('for') + '"]')... // do something to label
我在下面链接的实时演示中包含了这两个解决方案。
实时演示
我就是这样做的。为了能够在输入框旁边放置自定义图像并将其删除，以及更改输入框的边框颜色。
<html>
<head>
<meta charset="utf-8">
<title>error handling</title>
<link rel="stylesheet" media="screen" href="css/screen.css">
<script src="js/jquery-validation-1.13.1/lib/jquery.js"></script>
<script src="js/jquery-validation-1.13.1/dist/jquery.validate.js"></script>
<script>
$(document).ready(function()
{
$("#someForm").validate({
rules:
{
param1: {required: true, minlength: 3, maxlength: 15},
param2: {required: true, minlength: 3, maxlength: 15}
},
errorPlacement: function(error, element)
{
element.attr("style","border-color: red");
element.parent('div').append( '<div id="'+element.attr('id')+"img"+'" class="errorValidationIcon"><a href="#" class="errorValidationTooltip"><img src="img/redError.png" class="errorValidationIcon"/><span><img class="callout" src="img/callout.gif" /><strong></strong><br /></span> </a></div> ');
error.appendTo('strong');
},
success: function(label)
{
if (label.attr('for') === 'param1')
{
$('#param1img').remove();
$('#param1').attr("style", "border-color: rgb(83,103,141)");
}
if (label.attr('for') === 'param2')
{
$('#param2img').remove();
$('#param2').attr("style", "border-color: rgb(83,103,141)");
}
}
});
});
</script>
</head>
<body>
<div id="layoutCenter">
<form id="someForm" action="#">
<div>
<div>Register</div>
<div>
<div>Blah</div>
<div ><div >Parameter<div>*</div></div><div ><input name="param1" id="param1" type="text" /></div></div>
<div ><div >OID<div>*</div></div><div ><input name="param2" id="param2" type="text" /></div></div>
</div>
</div>
</form>
</div>
</body>
</html>