I have two forms on a single page. One is just a form for the particular page it’s on and the other is a side form that is on every page. I have gotten a validator to work to format the error ridden fields; it shows red boxes around fields that are incomplete. This works on the first form however if you submit the second form, it will still format the first form only. I have taken out the code for the first form, and the second side form works perfectly. My question is how can I get the validator to check and submit only the form which is clicked? I have made a short test page to illustrate the problem.
<!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>
As everyone has suggested I am going to post the js file. (I am not posting the standard jquery validate file.)
$(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);
});
};
You can try this in your script section, provided you are using jquery