我在一页上有两个表单。一个只是它所在的特定页面的表单，另一个是每个页面上的侧面表单。我已经得到了一个验证器来格式化错误缠身的字段;它在不完整的字段周围显示红色框。这适用于第一个表单，但是如果您提交第二个表单，它仍将仅格式化第一个表单。我已经取出了第一个表单的代码，第二个侧面表单运行良好。我的问题是我怎样才能让验证者检查并仅提交点击的表单？我做了一个简短的测试页面来说明这个问题。
<!DOCTYPE >
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="js/mktSignup.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/css.css">
</head>
<body>
<!-- When you submit this form the appropriate red boxes are shown around the errored fields-->
<form id="requestAppointment" method="post" type="actionForm" action="." name="requestFreeConsultation">
<label for="name">Your Name</label><br>
<input type="text" class="stdFormFieldSml defaultInvalid" value="First Name" name="firstName" id="firstName" onclick="if(this.value=='First Name')this.value='';" />
<input type="submit" name="firstForm" value="Submit" />
</form>
<!-- This form when you hit submit causes red boxes around the previous form's incomplete fields-->
<form name="freeConsultationWidget" action="thank-you.php" method="post">
<label for="nameMini">Your Name</label><br>
<input type="text" class="stdFormFieldSml defaultInvalid" value="First Name" name="firstNameMini" id="firstNameMini" onclick="if(this.value=='First Name')this.value='';" />
<input type="image" name="secondForm" value="submit1"/>
</form>
</body>
</html>
正如每个人都建议的那样，我将发布js文件。（我不是在发布标准的jquery验证文件。
$(document).ready(function(){
jQuery.validator.addMethod("password", function( value, element ) {
var result = this.optional(element) || value.length >= 6 && /'d/.test(value) && /[a-z]/i.test(value);
if (!result) {
element.value = "";
var validator = this;
setTimeout(function() {
validator.blockFocusCleanup = true;
element.focus();
validator.blockFocusCleanup = false;
}, 1);
}
return result;
}, "Your password must be at least 6 characters long and contain at least one number and one character.");
// a custom method making the default value for companyurl ("http://") invalid, without displaying the "invalid url" message
jQuery.validator.addMethod("defaultInvalid", function(value, element) {
return value != element.defaultValue;
}, "");
jQuery.validator.addMethod("billingRequired", function(value, element) {
if ($("#bill_to_co").is(":checked"))
return $(element).parents(".subTable").length;
return !this.optional(element);
}, "");
jQuery.validator.messages.required = "";
$("form").validate({
invalidHandler: function(e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted below'
: 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
onkeyup: false,
submitHandler: function() {
$("div.error").hide();
alert("submit! use link below to go to the other step");
},
messages: {
password2: {
required: " ",
equalTo: "Please enter the same password as above"
},
email: {
required: " ",
email: "Please enter a valid email address, example: you@yourdomain.com",
remote: jQuery.validator.format("{0} is already taken, please enter a different address.")
}
},
debug:true
});
$("input.home").mask("(999) 999-9999");
$("input.zipcode").mask("99999");
$("input.ssNumber").mask("999-999-9999");
/*
var creditcard = $("ssNumber").mask("999-999-9999 9999");
$("#cc_type").change(
function() {
switch ($(this).val()){
case 'amex':
creditcard.unmask().mask("9999 999999 99999");
break;
default:
creditcard.unmask().mask("9999 9999 9999 9999");
break;
}
}
);
*/
/*
// toggle optional billing address
var subTableDiv = $("div.subTableDiv");
var toggleCheck = $("input.toggleCheck");
toggleCheck.is(":checked")
? subTableDiv.hide()
: subTableDiv.show();
$("input.toggleCheck").click(function() {
if (this.checked == true) {
subTableDiv.slideUp("medium");
$("form").valid();
} else {
subTableDiv.slideDown("medium");
}
});
*/
});
$.fn.hoverClass = function(classname) {
return this.hover(function() {
$(this).addClass(classname);
}, function() {
$(this).removeClass(classname);
});
};
您可以在脚本部分尝试此操作，前提是您使用的是jquery
$('form[name="requestAppointment"]').submit(function(){
alert('From requestAppointment submited');// Test purpose
// your logic
});
$('form[name="freeConsultationWidget"]').submit(function(){
alert('From freeConsultationWidget submited');// Test purpose
// your logic
});
似乎您的验证器脚本选择了页面的第一个表单，如下所示
//javascript code
var Form = document.forms[1]; ,
// you need to select second form, using
var Form2 = document.forms[2]; ,