input validation mask inner - Free Download Feature-rich Input Validation & Mask Plugin - InnerFormValidation

Free Download Feature-rich Input Validation & Mask Plugin – InnerFormValidation

By Posted on

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.

input validation mask inner - Free Download Feature-rich Input Validation & Mask Plugin - InnerFormValidation
File Size: 12 KB
Views Total: 1016
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

view source
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
view source
001 <form action="javascript:void(0)" class="validate">
002   <div class="row">
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' />
007       </div>
008     </div>
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' />
013       </div>
014     </div>
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' />
019       </div>
020     </div>
021     <div class="col-md-6">
022       <div class="form-group">
023         <label>Lowercase only</label>
024         <input type='text' placeholder="Text" class='lower' />
025       </div>
026     </div>
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' />
031       </div>
032     </div>
033     <div class="col-md-6">
034       <div class="form-group">
035         <label>Uppercase only</label>
036         <input type='text' placeholder="Text" class='upper' />
037       </div>
038     </div>
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' />
043       </div>
044     </div>
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' />
049       </div>
050     </div>
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' />
055       </div>
056     </div>
057     <div class="col-md-6">

Related posts:

058