1
因此，我使用jQuery构建了此表单验证，并且它在Chrome中完美工作，并在IE和FF中惨败。该页面在IE和FF中提交后继续加载。jQuery表单验证 - 跨浏览器兼容性
我无法找到一个值得解释的原因或解决方法。 任何建议将不胜感激....
我也想知道如何验证复选框字段使用jQuery规则&消息，如果这是可能的。在jQuery文档中找不到关于此的任何信息。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#successForm").validate({
rules: {
firstName: {
required: true,
minlength: 2,
},
lastName: {
required: true,
minlength: 2,
},
phoneNumber: {
required: true,
minlength: 10,
},
emailAddress: {
required: true,
email: true,
},
attachOne: {
required: true,
accept: "png|jpg|gif|jpeg|tif",
},
attachTwo: {
required: true,
accept: "png|jpg|gif|jpeg|tif",
},
termsAgree: {
required: true,
minlength: 1,
},
},
messages: {
firstName: {
required: "Please enter your First Name.",
minlength: jQuery.format("You need to use at least {0} characters for your first name."),
},
lastName: {
required: "Please enter your Last Name.",
minlength: jQuery.format("You need to use at least {0} characters for your last name"),
},
phoneNumber: {
required: "Please enter your Phone Number.",
minlength: jQuery.format("Please enter a valid phone number."),
},
emailAddress: {
required: "Please enter your Email Address.",
minlength: jQuery.format("Please enter a valid email address."),
},
dateOfBirth: {
required: "Please enter your Date of Birth.",
minlength: jQuery.format("Please enter the date in the format DD-MM-YYYY."),
},
termsAgree: "You must agree to the Terms and Conditions.",
}
});
});
</script>
<style type="text/css">
input.error { border: 1px solid red; }
label.error {background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
}
label.valid {background: url('http://dev.jquery.com/view/trunk/plugins/validate/demo/images/checked.gif') no-repeat;
display: block;
width: 16px;
height: 16px;
}
</style>
<form action="<?=$_SERVER['PHP_SELF'];?>" enctype="multipart/form-data" id="successForm"><table style="padding: 6px;">
<tr>
<td><label for="firstName">First Name</label></td>
<td><input type="text" id="firstName" name="firstName" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($firstName));?>" /></td>
</tr>
<tr>
<td><label for="lastName">Last Name</label></td>
<td><input type="text" id="lastName" name="lastName" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($lastName));?>" /></td>
</tr>
<tr>
<td><label for="phoneNumber">Phone Number</label></td>
<td><input type="text" id="phoneNumber" name="phoneNumber" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($phoneNumber));?>" /></td>
</tr>
<tr>
<td><label for="emailAddress">Email Address</label></td>
<td><input type="text" id="emailAddress" name="emailAddress" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($emailAddress));?>" /></td>
</tr>
<tr>
<td><label for="dateOfBirth">Date of Birth</label></td>
<td><input type="text" id="dateOfBirth" name="dateOfBirth" class="InputSuccess" value="<?=stripslashes(htmlspecialchars($dateOfBirth));?>" /></td>
</tr>
<tr>
<td><label for="successStory">Your Success Story</label></td>
<td><textarea id="successStory" name="successStory" cols="50" rows="6"></textarea></td>
</tr>
<tr>
<td colspan="2" style="margin-top:20px; margin-bottom: 5px; border: 1px solid #666; color:#666; width:300px;"><b>Please attach some photos of your success.</b><br /><span style="font-size:8pt;">Accepted File Types: jpg, jpeg, gif, png, tif<br />Maximum File Size: 2 megabytes</span>
<table style="border: 0px;">
<tr>
<td style="width:150px;"><label for="attachOne">Attachment 1</label></td>
<td><input type="file" id="attach[0]" name="attachOne" /></td>
</tr>
<tr>
<td style="width:150px;"><label for="attachOne">Attachment 2</label></td>
<td><input type="file" id="attach[1]" name="attachOne" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><label for="termsConditions">Terms & Conditions</label></td>
<td><textarea id="termsConditions" name="termsConditions" cols="50" rows="6">Terms and Conditions...</textarea></td>
</tr>
<tr>
<td><label for="termsAgree"> </label></td>
<td><input type="checkbox" id="termsAgree" name="termsAgree" />I have read and agree to the Terms and Conditions.</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;"><input type="submit" value="Validate!" /><input type="reset" value="Reset!" /></td>
</tr>
</table>
</form>
感谢您的帮助。不幸的是，这并没有奏效。我可能会误解你的代码，但这里是我的。
<script type="text/javascript">
function validateForm() {
if ($(".required").valid() == 0) {
alert("failed!");
return false;
}
else {
alert("success!");
return true;
}
}
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$(document).ready(function(){
$("#successForm").validate({
rules: {
firstName: {
required: true,
minlength: 2,
},
lastName: {
required: true,
minlength: 2,
},
phoneNumber: {
required: true,
minlength: 10,
},
emailAddress: {
required: true,
email: true,
},
attachOne: {
required: true,
accept: "png|jpg|gif|jpeg|tif",
},
attachTwo: {
required: true,
accept: "png|jpg|gif|jpeg|tif",
},
termsAgree: {
required: true,
minlength: 1,
},
},
messages: {
firstName: {
required: "Please enter your First Name.",
minlength: jQuery.format("You need to use at least {0} characters for your first name."),
},
lastName: {
required: "Please enter your Last Name.",
minlength: jQuery.format("You need to use at least {0} characters for your last name"),
},
phoneNumber: {
required: "Please enter your Phone Number.",
minlength: jQuery.format("Please enter a valid phone number."),
},
emailAddress: {
required: "Please enter your Email Address.",
minlength: jQuery.format("Please enter a valid email address."),
},
dateOfBirth: {
required: "Please enter your Date of Birth.",
minlength: jQuery.format("Please enter the date in the format DD-MM-YYYY."),
},
termsAgree: "You must agree to the Terms and Conditions.",
}
});
});
</script>
我似乎没有在Chrome，FF或IE中看到提示。我试过onsubmit = from和onclick = from。都没有工作。
Trent，如果有人正确回答您的问题，请通过点击问题旁边的勾号指出它是正确的。欢迎来到SO – griegs