【发布时间】：2014-12-03 16:05:38
【问题描述】：
在使用 jQuery Validate 插件时，我一直在努力尝试让自定义错误消息在 3 种不同的情况下正确显示。
- 我有一个组，并且只需要一个组成员。
- 复选框字段的自定义消息。
- 有条件地需要字段时显示错误消息。
我已经注意到这篇文章：How to show different error messages based on various conditions。这可能是我的问题解决方案的一部分吗？我还查看了Custom error messages for Groups within the jQuery Validation plugin，但它似乎没有解决只需要 1 个小组成员的问题，也没有解决我的问题。
我是 jQuery 和 fiddles 的新手，并且有一个无法正常工作的小提琴。我怀疑这是因为我没有指向 CSS 中使用的图形的链接，这些图形来自验证插件包中的 Milk 和 Marketo 示例。小提琴位于http://jsfiddle.net/cloudmech/myvmb95d/23/。
这是我正在使用的代码。
jQuery：
$(document).ready(function() {
$('#00NU00000049YHZ').change(function(){
var checked = $(this).is(':checked');
$('#company_information').toggle(checked);
$('#company').prop('disabled', !checked)
}).change();
var $CompHdwDon = $('#00NU00000049YHj'),
$SchedPickup = $('#00NU00000049YHt');
$('#w2lForm').validate({
debug: true,
rules:{
company: {
depends: function(element) {
var checked = $('#00NU00000049YHZ').is(':checked');
return (checked);
minlength: 3
}
},
phone: {
require_from_group: [1, '.phone_group'],
phoneUS: true,
},
Mobile: {
require_from_group: [1, '.phone_group'],
phoneUS: true,
},
CompHdwDon: {
required: checked=true
},
SchedPickup: {
required: checked=true
},
},
messages: {
company: {
depends: function(element) {
var checked = $('#00NU00000049YHZ').is(':checked');
return (checked);
required: "Please provide the name of your company"
}
},
phone_group: {
required: "Either your regular or mobile phone is required"
},
phone: {
required: "Either your regular or mobile phone is required"
},
Mobile: {
required: "Either your regular or mobile phone is required"
},
CompHdwDon: {
required: "This box must be checked for us to pick up a donation"
},
SchedPickup: {
required: "This box must be checked to schedule a donation pickup"
},
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
var n = element.attr("name");
if (n == "phone" || n == "Mobile")
error.appendTo(element.parent().next());
else if (element.is(":radio"))
error.appendTo(element.parent().next().next());
else if (element.is(':checkbox'))
error.appendTo(element.parent().next());
else
error.appendTo(element.parent().next());
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
},
highlight: function(element, errorClass) {
$(element).parent().next().find("." + errorClass).removeClass("checked");
}
// specifying a submitHandler prevents the default submit, good for the demo
});
});
HTML：
<BODY>
<div id="page-content-inner" class="resize">
<form id="w2lForm" action="https://www.xxxxx.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="retURL" value="http://www.google.com">
</br>
<TABLE >
<TR>
<TD class="label">This is for a Company:</TD>
<TD class="field"><input id="00NU00000049YHZ" name="00NU00000049YHZ" type="checkbox" value="0" /></TD>
<TD class="status"></TD>
<!-- If is This is for a Company == false, hide line below. If = true, show line below -->
<TD class="label" colspan="2">
<div id="company_information">
<label id="cmpnylbl" for="company" class="label" >Company:
<input id="company" maxlength="40" name="company" size="20" type="text" class="required" /></div></TD>
<TD class="status"></TD>
</TR>
<!--- create phone group below and require 1 of the two --->
<TR>
<TD class="label"><label for="phone">Phone:</label></TD>
<TD class="field"><input id="phone" class="phone_group" maxlength="40" name="phone" size="20" type="text" /></TD>
<TD class="status"></TD>
<TD class="label"><label for="mobile">Mobile:</label></TD>
<TD class="field"><input id="mobile" class="phone_group" maxlength="40" name="mobile" size="20" type="text" /></TD>
<TD class="status"></TD>
</TR>
<TR>
<TD class="label">Computer Hardware Donation:</TD>
<TD class="field"><input id="00NU00000049YHj" name="00NU00000049YHj" type="checkbox" value="1" class="required" /></TD>
<TD class="status"></TD>
<TD class="label">Schedule Pickup:</TD>
<TD class="field"><input id="00NU00000049YHt" name="00NU00000049YHt" type="checkbox" value="1" class="required" /></TD>
<TD class="status"></TD>
</TR>
<TR><TD class="field" COLSPAN="4"><input type="submit" name="submit"></TD></TR>
</TABLE>
</form>
</div>
</BODY>
CSS：
body, input, select, textarea { font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; }
img {
border: 0px;
}
#resize{
width: 500px;
}
.clear {
clear: both;
}
input { border: 1px solid black; margin-bottom: .5em; }
input.error { border: 2px solid red; }
label.error {
display: block;
color: red;
font-style: italic;
font-weight: normal;
background: url('images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
label.valid {
background: url('images/checked.gif') no-repeat;
display: block;
width: 16px;
height: 16px;
}
form table td {
padding: 5px;
}
form table input {
width: 200px;
padding: 3px;
margin: 0px;
}
textarea {
width: 400px
}
td.label {
width: 150px;
}
tr.required td.label {
font-weight: bold;
background: url( 'images/backRequiredGray.gif') no-repeat right
center;
}
td.field input.error, td.field select.error, tr.errorRow td.field input,tr.errorRow td.field select {
border: 2px solid red;
background-color: #FFFFD5;
margin: 0px;
color: red;
}
tr td.field div.formError {
display: none;
color: #FF0000;
}
tr.errorRow td.field div.formError {
display: block;
font-weight: normal;
}
#w2lForm .table {
border-spacing: 0px;
border-collapse: collapse;
empty-cells: show;
}
#w2lForm .label {
padding-top: 2px;
padding-right: 8px;
vertical-align: top;
text-align: right;
width: 125px;
white-space: nowrap;
}
#w2lForm .field {
padding-bottom: 10px;
white-space: nowrap;
}
#w2lForm .status {
padding-top: 2px;
padding-left: 8px;
vertical-align: top;
width: 246px;
white-space: nowrap;
}
#w2lForm .textfield {
width: 150px;
}
#w2lForm label.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
#w2lForm label.checked {
background:url("images/checked.gif") no-repeat 0px 0px;
}
作为最后一个问题，当我让这一切正常工作时，我想使用所示的 servlet 发布它。我是否需要将以下内容添加到我的 jQuery 中，是否需要构建 Ajax 处理程序或什么都不做？我观察到，当 servlet 的完整 URL 可用时，它似乎“按原样”提交。
submitHandler: function(form) {
form.submit();
}
修改后的 jQuery：
$(document).ready(function() {
$('#00NU00000049YHZ').change(function(){
var checked = $(this).is(':checked');
$('#company_information').toggle(checked);
$('#company').prop('disabled', !checked)
}).change();
$('#00NU00000049YHZ').on('change', function () { // fire on change
$('[name="company"]').valid(); // evaluate rules on company
});
$('#w2lForm').validate({
debug: true,
rules:{
company: {
required: {
depends: function(element) {
return $('#00NU00000049YHZ').is(':checked');
}
},
minlength: 3
},
phone: {
require_from_group: [1, '.phone_group'],
phoneUS: true,
},
Mobile: {
require_from_group: [1, '.phone_group'],
phoneUS: true,
},
"00NU00000049YHj": {
required: true
},
"00NU00000049YHt": {
required: true
},
},
messages: {
company: {
required: "Please provide the name of your company",
minlength: "Please type at least {0} characters"
},
phone: {
require_from_group: "Either your regular or mobile phone is required"
},
Mobile: {
require_from_group: "Either your regular or mobile phone is required"
},
"00NU00000049YHj": {
required: "This box must be checked for us to pick up a donation"
},
"00NU00000049YHt": {
required: "This box must be checked to schedule a donation pickup"
},
},
// the errorPlacement has to take the table layout into account
errorPlacement: function(error, element) {
var n = element.attr("name");
if (n == "phone" || n == "Mobile")
error.appendTo(element.parent().next());
else if (element.is(":radio"))
error.appendTo(element.parent().next().next());
else if (element.is(':checkbox'))
error.appendTo(element.parent().next());
else
error.appendTo(element.parent().next());
},
// set this class to error-labels to indicate valid fields
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
},
highlight: function(element, errorClass) {
$(element).parent().next().find("." + errorClass).removeClass("checked");
}
});
});
【问题讨论】：