I'm using the latest version of the jQuery Validator plugin along with jQuery (1.6.2).
I have a simple form with an optional field for phone number called Phone
. The following code works flawlessly when all fields are "required". The problem today is that I added an optional field and Validator seems to be ignoring the rules for this optional field.
HTML:
<div id="contact">
<form id="contactForm" action="/cgi-bin/FormMail.pl" method="post">
<input type="hidden" name="subject" value="Contact Form" />
<input type="hidden" name="redirect" value="thankyou.html" />
<input type="hidden" name="required" value="Name,email,Comments" />
<input type="text" class="autoclear blur defaultInvalid" value="your full name" name="Name" /><br />
<input type="text" class="autoclear blur defaultInvalid" value="your email address" name="email" /><br />
<input type="text" class="autoclear blur defaultInvalid" value="your phone num开发者_StackOverflowber" name="Phone" />
<fieldset id="radioset">
<input type="radio" id="radio-1" name="recipient" value="myEmail1@email.com" checked="checked" /><label for="radio-1">Label 1</label>
<input type="radio" id="radio-2" name="recipient" value="myEmail2@email.com" /><label for="radio-2">Label 2</label>
<input type="radio" id="radio-3" name="recipient" value="myEmail3@email.com" /><label for="radio-3">Label 3</label>
</fieldset>
<textarea class="autoclear blur defaultInvalid" name="Comments">your comments</textarea><br />
<input type="submit" value="Send Message" />
</form>
</div>
I use qTip2 to indicate the required fields upon validation.
Everything (technically) is working, it's validating and the qTip Tooltips are popping up.
The whole problem is that, despite my parameters telling it that "Phone" is optional, it keeps flagging "Phone" as required and popping up a blank qTip. I know qTip2 is not the issue here because it's just looking for class="error"
. I can see in the DOM that the Validator is applying class="error"
to the optional field despite my rules.
(I know required: false
is the default but I added that rule anyway because of this issue. It's still ignored!)
Can anyone see why it would be doing this?
jQuery/JavaScript:
$(document).ready(function() {
var nameMsg = "Please enter your full name.",
emailMsg = "Please enter your email address.",
emailMsgV = "This is not a valid email address.",
commentsMsg = "Please enter your comments.";
$('#contactForm').validate({
onkeyup: false,
validClass: 'valid',
rules: {
Name: {
required: true
},
email: {
required: true,
email: true
},
Phone: {
required: false
},
Comments: {
required: true
}
},
messages: {
Name: nameMsg,
email: {
defaultInvalid: emailMsg,
required: emailMsg,
email: emailMsgV
},
Comments: commentsMsg
},
success: function(error) {
setTimeout(function() { // Use a mini timeout to make sure the tooltip is rendred before hiding it
$('#contactForm').find('.valid').qtip('destroy');
}, 1);
},
submitHandler: function(form) {
form.submit();
},
errorPlacement: function(error, element) {
$(element).filter(':not(.valid)').qtip({ // Apply the tooltip only if it isn't valid
overwrite: false,
content: error,
position: {
my: 'bottom left',
at: 'top left',
viewport: $(window),
adjust: {
x: 25
}
},
show: {
event: false,
ready: true
},
hide: false
}).qtip('option', 'content.text', error);
} // closes errorPlacement
}) // closes validate()
}); // closes document.ready()
I found the problem...
I was mistakenly applying the class defaultInvalid
to the optional field. Doh!
It should look like this instead...
<input type="text" class="autoclear blur" value="your phone number" name="Phone" />
EDIT for clarity:
defaultInvalid
is a custom Validator method used for validating required
input
fields which also have some default data pre-entered. Since this is not a required
field, there's no reason to use this method.
精彩评论