6

Given a text box that is masked using the Masked Input plugin, and is marked as a required field by the Validation Plugin, consider the following:

If you put your focus in a text box that is masked, then leave it without entering any information (or don't input enough information to satisfy the mask), the masked input plugin will delete everything, leaving you with an empty text box.

$("#phoneNumber").mask("(999) 999-9999? x999999");
$("#sampleForm").validate({
    rules: {
        phoneNumber: "required"
    }
});

The validation plugin seems to be firing its blur event before the masked input plugin. This results in the text box passing validation (as it does have text in it), then the masked input plugin kicks in and removes the text. The field should be marked as invalid as soon as it has lost focus.

I've tried using a regular expression validator. It gets close, but again, because it triggers before the masked input plugin has cleaned up the field it shows an error when it should not (though the error goes away when the user tries to submit the form).

I've also tried this:

$('input').bind('unmasked.maskedInput', function () { $(this).valid(); });

This works, but it also interferes with the validator's initial behavior: fields are not validated until the submit button is pressed, then they are validated when they lose focus.

I've setup a jsFiddle that depicts the issues I'm running into.

Sparky
  • 98,165
  • 25
  • 199
  • 285
Mike
  • 71
  • 1
  • 1
  • 3

3 Answers3

7

Hiya working demo http://jsfiddle.net/2hdTn/

Cooleos so if I got it right masked plugin was removing the input hence the chaos. :)

In the sample demo above the entered number will remain entered and you can hook up the validation with it.

Oh and if this helps don't forget to accept the the answer and up vote.

Also see here: there is also clearEmpty: false http://view.jqueryui.com/mask/tests/visual/mask/mask.html

You probably just need to make the whole mask optional and bingo it will work :)

(Please let me know if I missed anything)

Jquery COde

jQuery.validator.addMethod("usPhoneFormat", function (value, element) {
    return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
}, "Enter a valid phone number.");

$.fn.ready(function () {

    $("#sampleForm").validate({
        rules: {
            phoneNumber: "required",
            phoneNumberRegEx: {
                usPhoneFormat: true,
                required: true
            },
            phoneNumberReg: "required"
        },
        submitHandler: function (form) {
            alert("submitted.");
        }
    });
    $(".phone").mask("?(999) 999-9999 x999999");
    //alert('foo');
});

​
Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • If the regular expression validator is not used then any number will be accepted (valid or not). Making the entire string optional doesn't work either, as you're left with the "x" if you don't enter an extension. – Mike Apr 29 '12 at 16:08
  • Hiya, You can always get rid of x if that is not required: see here: http://jsfiddle.net/2hdTn/4/ please let me know if this works for your case, have a nice one, cheerios! – Tats_innit Apr 29 '12 at 20:06
  • @user3097736 what is not working ? http://jsfiddle.net/2hdTn/ go to this fiddle and hit submit and you will see validator in action. `:))` – Tats_innit Jan 26 '14 at 04:26
2

You can re-validate the input on focusout/blur.

$('#inputId').on('blur', function(){
    $('#formId').validate().element('#inputId')
});
jmvtrinidad
  • 3,347
  • 3
  • 22
  • 42
1
phone_no:{
    icon: 'false',
    validators: {
        notEmpty: {
            message: 'Contact Phoneno is required'
        },
        regexp: {
            regexp: /^\d{3}\-\d{3}\-\d{4}$/,
            message: 'Please Enter Valid Phone number'
        }
    }
}

Enter this on formvalidator and will work perfectly fine

YakovL
  • 7,557
  • 12
  • 62
  • 102
Rutvij Kothari
  • 1,253
  • 11
  • 22