I'm trying to find the option that hides the default <label> tag if
there is no message displayed in it. Can someone help?
I want to display a message at the top of the form when the input
fields are empty, but display no text message. Only specific fields
have messages associated with them which I have defined.
The issue is that the defualt errorElement is adding space to my form
even when the <label> tag is empty.
here's what I have
<SCRIPT>
//Sets main rules for validation
$(document).ready(function(){
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#checkoutGuestDynForm").validate({
focusCleanup: true, //hides error on focus
rules: {
firstname: "required",
lastname: "required",
streetAddress: "required",
city: "required",
state: "required",
cardNo: {creditcard: true},
cvv2: {digits:true}
},
messages: {
cvv2: {
digits: "cvv2 only contains numbers"
}
},
//show error messages in div
errorLabelContainer: ".errorContainer",
wrapper: 'span class="errorSpan"',
//Displays the main error message at top of page
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1
? 'Please correct the highlighted field below.'
: 'You missed ' + errors + ' fields. Please correct the
fields highlighted below.';
$("#errorMsg").text(message);
$("#errorMsg").show();
} else {
$("#errorMsg").hide();
}
}
});
});
</SCRIPT>
