Surely! Validation functions are important for web front-end. We can say that “Submit form can’t live without validation”. All of developer don’t want to handle all of unaccept data and we would protect that in “submit form” on webpage.

So, we have many technic to create validation and rules in the form but in this article we will provide you to protect unaccept data on the fly by JQuery validation, In the same way, Regular expression are use for define rules to detect mis-matching input data.

Please note;

• The sample code are need to be apply with your web programming structure, required JQuery library.
• Regular expression in this example can be modify or adapt to fit with your requirement.

Getting ready.

Go.

1. Validates Numeric on the fly.

Accepts only 0 – 9

$('.onthefly-numeric').keyup(function() {
     $('span.error-onthefly-1').remove();
     var inputVal = $(this).val();
     var numericReg = /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/;
     if(!numericReg.test(inputVal)) {
        $(this).after('&nbsp;&nbsp;<span class="error error-onthefly-1">Numeric characters only</span>');
     }
});

RegEx rule: /^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/

Use for any data type that you need number 0-9 only.

2. Validates Maximum Of 5 Characters

Accepts any character within limitation

$('.onthefly-limit-5').keyup(function() {
     $('span.error-onthefly-2').remove();
     var inputVal = $(this).val();
     var characterReg = /^([a-zA-Z0-9]{0,5})$/;
     if(!characterReg.test(inputVal)) {
        $(this).after('&nbsp;&nbsp;<span class="error error-onthefly-2">Maximum 5 characters</span>');
     }
});

RegEx rule: /^([a-zA-Z0-9]{0,8})$/

Useful member no., employee no., etc. which both of text and numeric.

NOTE: You can change number ‘8’ to any number that you want to setup limitation, depend on your requirement

Tip: In 1,2 you can apply to be validation function for the Postcode that need 5 characters and numeric only

3. Validates Phone Number on the fly

Accepts phone number in form ###-###-#### in some local country.

$('.onthefly-phone').keyup(function() {
    $('span.error-onthefly-3').remove();
    var inputVal = $(this).val();
    if(inputVal == ""){
       $('span.error-onthefly-3').remove();
    }
    var characterReg = /^[2-9]\d{2}-\d{3}-\d{4}$/;
    if(!characterReg.test(inputVal)) {
       $(this).after('&nbsp;&nbsp;<span class="error error-onthefly- 3">Format xxx-xxx-xxxx</span>');
    }
});

RegEx rule: /^[2-9]\d{2}-\d{3}-\d{4}$/

Modify the Regular expression rule to match with your local phone number format.

4. Validates Email Address on the fly

Accepts email format. Ex. myemail@mydomain.com

$('.onthefly-email').keyup(function() {
    $('span.error-onthefly-4').remove();
    var inputVal = $(this).val();
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    if(!emailReg.test(inputVal)) {
        $(this).after('&nbsp;&nbsp;<span class="error error-onthefly-4">Invalid Email Format.</span>');
    }
});

RegEx rule: /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/

Useful email format validation that often use for every submit form.

5. Validates Visa Card Number on the fly

Accepts only visa credit card number format. see the format on front of your card.

$('.onthefly-cc').keyup(function() {
    $('span.error-onthefly-5').remove();
    var inputVal = $(this).val();
    var ccReg = /^4[0-9]{12}(?:[0-9]{3})?$/;
    if(!ccReg.test(inputVal)) {
        $(this).after('&nbsp;&nbsp;<span class="error error-onthefly-5">Invalid visa card number</span>');
    }
});

RegEx rule: /^4[0-9]{12}(?:[0-9]{3})?$/

Useful for credit card for checkout form.

View Demo