javascriptjqueryjquery-form-validator

jquery form validation allow only standard USA numbers


I found this plugin good so far Jquery Form Validator as so far it has fulfilled all my requirements but i am stuck to set validation for the users to enter only USA mobile number format something like this 1-(XXX)-XXX-XXXX . It should allow only this number to enter else it should not accept and should show form validation error.

I have researched but unable to find any tutorial or demo code which is showing how to achieve this particular thing and hence i had to put this question.

Can someone guide me or show me some code if possible how to achieve this using data-* attributes in html tags (i.e. <input data-validation="creditcard" data-validation-allowing="visa, mastercard, amex">) or any other way with the help of utilizing this plugin..

I am trying to utilize this Configuration Callbacks but i am bit confused how to utilize this as i have multiple forms and i have only put this code in my common.js file for all the forms which works well using for all the forms.

$.validate({
             modules : 'security, file'
        });

So i want something like common data-* attribute (if its available) which can work in a parcular html form which can be feasible for me as i do not need to type different code based on different form like this $.validate({form : '#LoginForm'}); as above common method will be feasible for me ..

Can someone help me to achieve this thing please ?

Any help will be highly appreciated.

Thanks.


Solution

  • Eventually I have sorted out this thing with ease thanks to @mplungjan who provided me a link and shown me a way how to accomplish this.

    I simply went here to the library Default validation custom and I see they actually are providing the facility to make regex validation on the go ..

    I searched regex to check US mobile numbers Phone Number Regex US

    And then after finding a regex to work with, I used this HTML code,

    <input name="user_mobile_no" class="form-control error" placeholder="Mobile No." 
    data-validation="required custom" 
    data-validation-error-msg-required="Please Enter Mobile Number" 
    data-validation-regexp="\D*([2-9]\d{2})(\D*)([2-9]\d{2})(\D*)(\d{4})\D*" 
    data-validation-error-msg-custom="Invalid Mobile Number (i.e. +1 XXX-XXX-XXXX)" 
    maxlength="50" id="user-mobile-no" value="+1 215-555-1212" 
    style="border-color: rgb(185, 74, 72);" type="text">
    

    And voila, its working.

    Notice these lines I have put above, data-validation="required custom" custom is required to put there to make custom validation.

    Then after I put

    data-validation-regexp="\D*([2-9]\d{2})(\D*)([2-9]\d{2})(\D*)(\d{4})\D*"
    

    which checks valid phone numbers and last but not the least, i have put two different validation error messages to show to the users for required data-validation-error-msg-required="Please Enter Mobile Number" and invalid number data-validation-error-msg-custom="Invalid Mobile Number (i.e. +1 XXX-XXX-XXXX)" .

    Thanks guys for support. I hope it helps someone who needs to deal with similar thing. Really appreciated.

    Thank you.