This time I will share jQuery Plugin and tutorial about Feature-rich Input Validation & Mask Plugin – InnerFormValidation, hope it will help you in programming stack.
A simple yet powerful jQuery form enhancement plugin that enables the user to create masked input fields with real-time value validation using only CSS classes and HTML data attributes.
See Also:
How to use it:
1. Load the InnerFormValidation.js
script after jQuery library and we’re ready to go.
1 |
< script src = "/path/to/cdn/jquery.min.js" ></ script > |
2 |
< script src = "/path/to/InnerFormValidation.js" ></ script > |
2. Add mask and validation rules to form fields using the following CSS classes:
- obg or req: Required field
- mask: Added built-in mask rules to the input field
- alphanumeric or alphanum: Only Alphanumeric characters (Aa to Zz, 0 to 9)
- num or number: Only numeric values (0 to 9)
- apha: Only Alphabetical characters (Aa to Zz)
- upper: Only uppercase characters
- lower: Only lowercase characters
- minlen numericvalue: Minimum value
- maxlen numericvalue: Maximum value
- len numericvalue: Exact value
- date or data: Valid Date in dd/MM/yyyy format
- datetime: Valid Date and Time in dd/MM/yyyy hh:mm:ss format
- datetimeshort: Valid Date and Time in dd/MM/yyyy hh:mm format
- monthyear: Valid Date in MM/yy format
- time: Valid Time in hh:mm:ss format
- timeshort: Valid Time in hh:mm format
- minage numericvalue: Age greater than a value in dd/MM/yyyy format
- maxage numericvalue: Age younger than a value in dd/MM/yyyy format
- age numericvalue: Exact age in dd/MM/yyyy format
- mail or email: Valid Email address
- cpf: Valid Brazilian CPF
- cnpj: Valid Brazilian CNPJ
- cpfcnpj: Valid Brazilian CPF or CNPJ
- cep: Valid Brazilian PostalCode
- eq selector: Equal selector (eg: eq #user_email)
- eqv value: Equal value (eg: eqv 20)
- contains value: Must contain a value (eg: contains test)
- tel: Telephone number
- link or url: Validate link or url
- password: Validate password strength
- strong: Need 4 of 4 criteria
- medium: Need 3 of 4 criteria
- numericvalue: Need numericavalue of 4 criteria
- creditcard or debitcard: Valid Credit Card Number (visa, mastercard, diners, amex, discover, hiper, elo, jcb, aura, maestro, laser, blanche, switch, korean, union, solo, insta, bcglobal, rupay)
- after numericvalue: Numbers greater than numericvalue
- before numericvalue: Numbers less than numericvalue
- numericvalue1 to numericvalue2: Numbers between numericvalue1 and numericvalue2
- after date: After date
- before date: Before date
- date1 to date2: Date between date1 and date2
- contains string: Must contain a string
- containschar string: Must contain a character
- containsanychar string: Must contain one of specified characters
- notcontainschar string: Must not contain these strings
001 |
< form action = "javascript:void(0)" class = "validate" > |
003 |
< div class = "col-md-6" > |
004 |
< div class = "form-group" > |
005 |
< label >No spaces (with mask)</ label > |
006 |
< input type = 'text' placeholder = "Text" class = 'mask nospace' /> |
009 |
< div class = "col-md-6" > |
010 |
< div class = "form-group" > |
011 |
< label >Alphanumeric (A-Z, 0-9)</ label > |
012 |
< input type = 'text' placeholder = "Text" class = 'alphanumeric' /> |
015 |
< div class = "col-md-6" > |
016 |
< div class = "form-group" > |
017 |
< label >Alphabetical (A-Z)</ label > |
018 |
< input type = 'text' placeholder = "Text" class = 'alpha' /> |
021 |
< div class = "col-md-6" > |
022 |
< div class = "form-group" > |
023 |
< label >Lowercase only</ label > |
024 |
< input type = 'text' placeholder = "Text" class = 'lower' /> |
027 |
< div class = "col-md-6" > |
028 |
< div class = "form-group" > |
029 |
< label >Lowercase only (with mask)</ label > |
030 |
< input type = 'text' placeholder = "Text" class = 'mask lower' /> |
033 |
< div class = "col-md-6" > |
034 |
< div class = "form-group" > |
035 |
< label >Uppercase only</ label > |
036 |
< input type = 'text' placeholder = "Text" class = 'upper' /> |
039 |
< div class = "col-md-6" > |
040 |
< div class = "form-group" > |
041 |
< label >Uppercase only (with mask)</ label > |
042 |
< input type = 'text' placeholder = "Text" class = 'mask upper' /> |
045 |
< div class = "col-md-6" > |
046 |
< div class = "form-group" > |
047 |
< label >Required field</ label > |
048 |
< input type = 'text' placeholder = "Required Field" class = 'obg' /> |
051 |
< div class = "col-md-6" > |
052 |
< div class = "form-group" > |
053 |
< label >Field with at least 4 characters</ label > |
054 |
< input type = 'text' placeholder = "" class = 'minlen 4' /> |
057 |
< div class = "col-md-6" > |