I've been trying to figure out why the validation of a phone number has been triggering for a phone number field. I'm using both the Validator plugin as well as the masked input plugins to set up some validation for a set of fields. I don't suspect that this specific issue is related to the usage of the masked input plugin, but I am mentioning it anyways.
If any of the fields (except the extension field) are filled, then all fields (except extension) are required. That code is doing what it should, but the validation is triggering an additional validation that I don't want. The phone number is doing a length check, even though I haven't coded anything where that's required.
$("#requestform").validate({
rules: {
namedepa: {
skip_or_fill_minimum: [6, ".section"]
},
techdepa: {
skip_or_fill_minimum: [6, ".section"]
},
conphodepa: {
skip_or_fill_minimum: [6, ".section"],
maskedPhone: true
},
techemaildepa: {
skip_or_fill_minimum: [6, ".section"]
},
adddepa: {
skip_or_fill_minimum: [6, ".section"]
},
roomdepa: {
skip_or_fill_minimum: [6, ".section"]
}
},
onfocusout: function (element) {
$(element).valid();
},
focusCleanup: true,
errorClass: "error"
});
var ErrorMessage = " Required";
jQuery.extend(jQuery.validator.messages, {
skip_or_fill_minimum: ErrorMessage,
required: ErrorMessage
});
I've created a JSFiddle that demonstrates the issue that I'm having. If you tab through the fields, when you get to and pass the phone number field, The a "you must enter no more than 10 characters" message appears.
I'm not sure where to go from here. The JsFiddle I've created also has the maskedPhone validator that I created, though I can't see this as bieng a problem, I've tested the phone numbers I'm using with the www.regexpal.com website.
You should not need the onfocusout callback function... that's the default behavior. Also errorClass: "error" is the default. See documentation for more info.
Secondly, the error message is being triggered by the maxlength="10" attribute inside the phone field in combination with the masked input itself being more than 10 characters.
<input name="phodepa" type="text" maxlength="10" id="phodepa" class="setTelephone section"/>
Your modified code: http://jsfiddle.net/vY22J/
I'm not entirely sure why you're using the skip_or_fill_minimum rule when you've selected all fields on the form as part of the rule. When you make them all required, the whole form is skipped when nothing is filled out, is also the default behavior of the plugin. I guess I'm not understanding the point in this case.
EDIT:
User beware: There is an open Github issue on the skip_or_fill_minimum rule.