jquery form validation allow only standard USA numbers

Question

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.

Answer 1

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.