There is this other StackOverflow post at here that is the EXACT issue I am having. But there was only one answer and it wasn't that helpful.
So I'm reposting in the hope that someone will have found a solution to this problem by now.
I have a form with an OPTIONAL phone number field with the jquery maskedInput plugin and the jquery validator plugin applied to it.
With no special settings, every time I tab out of the phone number field after setting it to nothing (it is optional), the validator spits back an error saying "enter a valid phone number". But the field is not required.
So then, based on this post here I tried adding the following code to the validator's onfocusout event.
onfocusout: function (element)
{
if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element)))
{
var currentObj = this;
var currentElement = element;
var delay = function () { currentObj.element(currentElement); };
setTimeout(delay, 0);
}
}
And at first, this seems to fix it. If I enter a valid phone number, no errors. It I enter no phone number, no errors. But if I enter an invalid phone number (only type 9 characters, for example), then when I tab out of the phone number box my typed in number is removed, and no error is displayed.
Is there a solution to this problem?
************UPDATE************** After further testing, I have confirmed that this is solely a problem with maskedinput. If I remove validation completely from the phone number field, and then enter a partial phone number in the phone number text box, and then tab out of it, the same behavior occurs (the partially entered number in the textbox is removed). Some more googling shows that this is a known issue with jquery.maskedinput, but I couldn't find any resolutions.
So my question still stands.. is there a solution to this problem?