Take the 2-minute tour ×

I have a phone number which is masked using http://digitalbush.com/projects/masked-input-plugin/ and validated using http://bassistance.de/jquery-plugins/jquery-plugin-validation/.

The code is located below, and an "almost" working example is located at http://jsfiddle.net/dnv38/.

Note that the phone number is not required, yet the two plugins conflict resulting in making the phone number required. A while back, I thought I found an answer per jquery.maskedinput-1.3.js conflicts with jquery.validate 1.9.0, but it turned out not to be correct.

How do I mask an input and validate it, but not make it required?

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js" type="text/javascript"></script>
<script src="http://snort-rule-manager.googlecode.com/svn-history/r2/trunk/assets/9982dce2/jquery.maskedinput.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {

    $("#phone").mask("(999) 999-9999");

    var validator=$("#form").validate({
        rules: {phone:"phoneUS"},
        submitHandler: function(form) {



<input type="text" name="phone" id="phone" value="" />

share|improve this question
The validation already happens within the mask plugin. So why bothering validating it again? Not sure if I understand you correctly, but if i see the situation correctly there are 2 validations happening here: the mask thing checks against a correct phone numer or not, and if not the field is blanked out. the validation plugin -again- checks whether its a correct number or not. if the field is not filled in whatsoever submithandler is triggered. –  mightyuhu Sep 14 '12 at 14:43
(123) 456-7890 is not a valid phone number since it starts with a 1. Masked input only checks if the correct type of characters are entered. Also, masked input doesn't give user feedback like jquery.validate, and I would like to be consistent with all user interaction. –  user1032531 Sep 14 '12 at 14:57
seen this stackoverflow.com/questions/4399086/… ? –  mightyuhu Sep 14 '12 at 15:08
Yes, that was the one which I first used, then had problems as indicated by my post several months ago stackoverflow.com/questions/12115588/…. I can't seem to reproduce my problems but will continue to try –  user1032531 Sep 14 '12 at 15:15
add comment

1 Answer

I was able to fix this by modifying the onfocusout method of the validation plugin with a closure, but it seemed wrong to do this....

    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);
share|improve this answer
add comment

Your Answer


