这里我使用验证插件，一切正常，但单选按钮和复选框显示的错误消息未正确排列。例如，我在这里使用两个单选按钮用于性别选项。如果没有选择任何内容，则在两个单选按钮之间显示错误消息。同样的事情也发生在列表框中。除了这个问题，我尝试了电话号码的范围选项，但我不知道如何正确使用范围选项。在这个问题上帮助我。
JSCode：
$(document).ready(function () {
$.validator.addMethod("validNameCharacter", function (value) {
var pattern = /^[a-zA-Z0-9]+$/;
return (pattern.test(value) > 0);
}, "Avoid Special Characters in User Name");
$.validator.addMethod("validPasswordCharacter", function (value) {
var pattern = /^[a-zA-Z0-9]+$/;
return (pattern.test(value) > 0);
});
$.validator.addMethod("ValidSalary", function (value) {
if (isNaN(value)) {
return false;
} else {
return true;
}
}, "Please enter a valid amount");
var validator = $("#registrationForm").validate({
errorClass: "error",
validClass: "valid",
// onkeyup: true,
// onblur: true,
// errorContainer: "#FormValidationErrors",
// errorLabelContainer: $('ol', "#FormValidationErrors"),
// wrapper: 'li',
rules: {
UserName: {
required: true,
minlength: 4,
maxlength: 15,
validNameCharacter: true
},
Password: {
required: true,
minlength: 4,
maxlength: 15,
validPasswordCharacter: true
},
ConfirmPassword: {
required: true,
minlength: 4,
maxlength: 15,
validPasswordCharacter: true,
equalTo: "#txtPassword"
},
EmailId: {
required: true,
email: true
},
Gender: "required",
DOB: {
required: true,
date:true
},
PhoneNumber: {
required: true,
range: [1, 10]
},
Salary: {
ValidSalary: true
},
Country: {
required: true
},
JobAlert: {
required: true
},
Languages: {
required: true
},
About: {
required: true,
minlength: 20,
maxlength: 120
},
TermsAndConditions: "required"
},
messages: {
UserName: {
required: "User Name is Required",
minlength: "Please enter atleast 4 characters ",
maxlength: "Please enter lessthan fifteen characters"
},
Password: {
required: "Password is Required",
minlength: "Please enter atleast 4 characters ",
maxlength: "Please enter less than fifteen characters",
validPasswordCharacter: "The Password you entered is invalid"
},
ConfirmPassword: {
required: "Confirm password is required",
minlength: "Please enter atleast 4 characters ",
maxlength: "Please enter less than fifteen characters",
validPasswordCharacter: "The Password you entered is invalid",
equalTo: "Password Does not matches"
},
EmailId: {
required: "Email is Required",
email: "Enter Valid Email"
},
Gender: {
required: "Please select the Gender"
},
DOB:
{
required: "Please enter your Date of birth",
},
PhoneNumber: {
range: "Enter phone number between 1 to 10 characters"
},
Country: {
required: "Please select the Country"
},
JobAlert: {
required: "Please select the Job Alerting type"
},
Languages: {
required: "Please select the States"
},
About: {
minlength: "Please enter morethan 20 characters",
maxlength: "Please enter lessthan 120 characters"
},
TermsAndConditions: "Please Accept It"
}
});
$(".cancel").click(function () {
validator.resetForm();
});
$("#btnChkValidForm").on('click', function () {
var status = $("#registrationForm").valid();
alert("Form is : " + status + "\nTotal Number of Invalid Fields is : " + validator.numberOfInvalids());
});
});
HTML：
<div id="UserRegistrationContainer" style="background: none repeat scroll 0% 0% slategray; width: 100%; border: 1px solid aqua; border-radius: 11px 11px 11px 11px;" >
<form action="/" method="post" id="registrationForm">
<table>
<tr>
<td>
User Name:
</td>
<td>
<input type="text" name="UserName" value="" />
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<input type="password" name="Password" value="" id="txtPassword"/>
</td>
</tr>
<tr>
<td>
Confirm Password:
</td>
<td>
<input type="password" name="ConfirmPassword" value="" />
</td>
</tr>
<tr>
<td>
Mail-ID:
</td>
<td>
<input type="text" name="EmailId" value="" />
</td>
</tr>
<tr>
<td>
Gender:
</td>
<td>
<input type="radio" name="Gender" value="Male" />
<label for="Gender">Male</label>
<input type="radio" name="Gender" value="Female" />
<label for="Gender" id="genderLabel">Fe Male</label>
</td>
</tr>
<tr>
<td>
DOB:
</td>
<td>
<input type="text" name="DOB" value="" id="txtDOB" />
</td>
</tr>
<tr>
<td>
Present Salary:
</td>
<td>
<input type="text" name="Salary" value="" />
</td>
</tr>
<tr>
<td>
Phone Number:
</td>
<td>
<input type="text" name="PhoneNumber" value="" />
</td>
</tr>
<tr>
<td>
Country:
</td>
<td>
<select name="Country">
<option value="">Select Country</option>
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="China">China</option>
<option value="Japan">Japan</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Australia">Australia</option>
<option value="South Africa">South Africa</option>
<option value="Russia">Russia</option>
</select>
</td>
</tr>
<tr>
<td>
Notify Job Alert:
</td>
<td>
<input type="checkbox" name="JobAlert" value="Email" /> Email <br />
<input type="checkbox" name="JobAlert" value="Message" /> Message <br />
<input type="checkbox" name="JobAlert" value="IVR" /> Voice Call <br />
<input type="checkbox" name="JobAlert" value="Post" /> Post <br />
</td>
</tr>
<tr>
<td>
Languages Interested:
</td>
<td>
<select name="Languages" multiple="multiple" size="5">
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Dot Net">Dot Net</option>
<option value="Vxml">Vxml</option>
<option value="Perl">Perl</option>
<option value="Phython">Phython</option>
<option value="HTML5 CSS">HTML5 CSS</option>
<option value="Unix">Unix</option>
</select>
</td>
</tr>
<tr>
<td>
About You:
</td>
<td>
<textarea name="About" cols="33" rows="5" style="color:Gray;"></textarea>
</td>
</tr>
<tr>
<td colspan="3">
<input type="checkbox" name="TermsAndConditions" value="" class="checkbox" />Accept Terms And Conditions
</td>
</tr>
<tr>
<td style="">
<input type="submit" id="btnSubmit" value="Submit" name="Submit"/>
<input type="reset" id="resetForm" value="Reset" style="margin-left:15px;" class="cancel" />
<input type="button" id="btnChkValidForm" value="Check Form" style="margin-left:11px;" />
<input type="submit" name="Save" value="Save" class="cancel" />
</td>
</tr>
</table>
</form>
<div id="FormValidationErrors" class="container" style="margin-left: 325px;color:Red;">
<ol>
</ol>
</div>
</div>
的CSS：
.error {
background-color: #FFCECE;
border:solid 1px red;
}
.valid {
color:black;
}
我的代码链接： 链接： - http://jsfiddle.net/qHCBy/
答案 0 :(得分：1)
引用OP ：
“如果未选择任何内容，则会在两个单选按钮之间显示错误消息。”
这是默认行为。消息（<label>）会立即显示在组中的第一个广播或复选框之后。
您可以使用errorPlacement回调函数更改其位置。
首先检查它是收音机还是复选框并相应地定位。
这是默认的回调...
errorPlacement: function(error, element) {
error.insertAfter(element);
}
在.validate()内，做一些类似的事情......
errorPlacement: function(error, element) {
if (element.attr("type") === "radio") {
// your custom position
} else {
error.insertAfter(element);
}
}
引用OP ：
“除了这个问题，我尝试了电话号码的范围选项，但我没有如何正确使用范围选项。”
我真的不确定你的意思，但这就是你使用range方法的方法，就像你实现它一样。
请参阅：http://jqueryvalidation.org/range-method/
说明：使元素需要给定的值范围。
使“field”成为值在13到23之间：
$( "#myform" ).validate({
rules: {
field: {
range: [13, 23]
}
}
});
也许您想要rangelength方法？
请参阅：http://jqueryvalidation.org/rangelength-method/
将“字段”设置为2到6个个字符：
$( "#myform" ).validate({
rules: {
field: {
rangelength: [2, 6]
}
}
});