Press "Enter" to skip to content

[Mask] Validate Forms with jQuery and CSS classes | InnerFormValidation

Inner Form Validation is to hide and check forms with jQuery and CSS classes. This plugin enables the user to create compelling input fields with real-time value validation using only CSS classes and HTML data attributes.

jquery validate all input fields, simple jquery form validation example, jquery form validation without plugin, form validation in jquery, jquery required field validation on submit

How to make use of it:

1. Load the InnerFormValidation.js script after the jQuery library and we’re able to go.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/InnerFormValidation.js"></script>

2. Add masks and validation guidelines to type fields utilizing the next CSS classes:

<form action="javascript:void(0)" class="validate">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label>No spaces (with mask)</label>
        <input type='text' placeholder="Text" class='mask nospace' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Alphanumeric (A-Z, 0-9)</label>
        <input type='text' placeholder="Text" class='alphanumeric' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Alphabetical (A-Z)</label>
        <input type='text' placeholder="Text" class='alpha' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Lowercase only</label>
        <input type='text' placeholder="Text" class='lower' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Lowercase only (with mask)</label>
        <input type='text' placeholder="Text" class='mask lower' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Uppercase only</label>
        <input type='text' placeholder="Text" class='upper' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Uppercase only (with mask)</label>
        <input type='text' placeholder="Text" class='mask upper' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Required field</label>
        <input type='text' placeholder="Required Field" class='obg' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Field with at least 4 characters</label>
        <input type='text' placeholder="" class='minlen 4' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Field with a maximum of 4 characters</label>
        <input type='text' placeholder="" class='maxlen 4' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Field with a maximum of 4 characters (limit mask)</label>
        <input type='text' placeholder="" class='mask len 4' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Field with exact 4 characters</label>
        <input type='text' placeholder="" class='len 4' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Field with exact 4 characters (limit mask)</label>
        <input type='text' placeholder="" class='mask len 4' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Must Contain Space</label>
        <input type='text' placeholder="Your Name" class='contains _space' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Must Contain {} () characters</label>
        <input type='text' placeholder="Please enter some characters" class='containsanychar {}()' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>No ABCD characters</label>
        <input type='text' placeholder="Please enter some characters" class='notcontainschar ABCD' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Required field with message</label>
        <input type='text' placeholder="Fill this field" class='obg' data-invalidmessage="This field needs to be filled" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Email</label>
        <input type='text' placeholder="Email" class='email' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Numeric field</label>
        <input type='text' placeholder="Only numbers" class='num' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Numerical field with mask</label>
        <input type='text' placeholder="Only numbers" class='mask num' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Telephone with Mask</label>
        <input type='text' placeholder="telephone" class='mask tel' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Telephone without Mask</label>
        <input type='text' placeholder="telephone" class='tel' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>CPF with Mascara</label>
        <input type='text' placeholder="CPF" class='mask cpf' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div>CNPJ with Mascara</div>
        <input type='text' placeholder="CNPJ" class='mask cnpj' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div>CPF or CNPJ with Mascara</div>
        <input type='text' placeholder="CPF or CNPJ" class='mask cpfcnpj' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>CEP with Mascara</label>
        <input type='text' placeholder="CEP" class='mask cep' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>URL</label>
        <input type='text' placeholder="CEP" class='mask url' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Date with Mask</label>
        <input type='text' placeholder="Date" class='mask date' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Time with Mascara</label>
        <input type='text' placeholder="hh:mm:ss" class='mask time' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Date and Time with Mask</label>
        <input type='text' placeholder="dd/MM/yyyy hh:mm:ss" class='mask datetime' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Date and Time with Mask (short)</label>
        <input type='text' placeholder="dd/MM/yyyy hh:mm" class='mask datetimeshort' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Age Validation (over 18 years)</label>
        <input type='text' placeholder="dd/MM/yyyy" class='mask date minage 18' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Hour with Mascara (short)</label>
        <input type='text' placeholder="hh:mm" class='mask timeshort' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Number greater than 10</label>
        <input type='text' placeholder="Number" class='mask num after 10' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Number less than 10</label>
        <input type='text' placeholder="Number" class='mask num before 10' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Date Before Today</label>
        <input type='text' placeholder="Date" class='mask date before today' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Date After Today</label>
        <input type='text' placeholder="Date" class='mask date after today' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Field Comparison</label>
        <input type='text' id="c1" placeholder="password" class='eq #c2' />
        <input type='text' id="c2" placeholder="confirm password" class='eq #c1' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Strong Password (Minimum 8 characters and 4 criteria)</label>
        <input type='password' placeholder="password" class='password strong minlen 8' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Moderate Password (Minimum 4 characters and 3 criteria)</label>
        <input type='password' placeholder="password" class='password medium minlen 4' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Credit Card with Mask</label>
        <input type='text' id="senha" placeholder="Credit Card Number" class='mask creditcard' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Visa Credit Card with Mask</label>
        <input type='text' placeholder="Visa" class='mask creditcard visa' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Mastercard Credit Card with Mask</label>
        <input type='text' placeholder="Mastercard" class='mask creditcard mastercard' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Number Range</label>
        <input type='text' placeholder="between 1 and 10" class='mask num 1 to 10' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Date Range</label>
        <input type='text' placeholder="Between 01/01/2019 and 31/12/2019" id="datarange" class='mask date 01/01/2019 to 31/12/2019' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Error and Success Callback</label>
        <input type='text' placeholder="Type OK in this field" class='obg eq #div_OK' data-invalidcallback="$('#div_OK').fadeIn()" data-validcallback="$('#div_OK').fadeOut()" />
      </div>
      <p id="div_OK">OK</p>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>Number</label>
        <input type='text' placeholder="Enter the Number" class='mask num autocomplete' />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <label>CEP with Address Autocomplete</label>
        <input type='text' placeholder="Enter zip code" class='mask cep autocomplete' />
      </div>
      <p class="autocomplete fulladdress"></p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button class="btn btn-success">Validate</button>
    </div>
  </div>
</form>

3. Customize the error message utilizing the data-invalidmessage attribute.

<input type='text' placeholder="Fill this field" class='obg' data-invalidmessage="This field needs to be filled" />

4. Apply customized types to the form fields when legitimate or invalid.

.error {
  border-color: red !important;
}

.success {
  border-color: green !important;
}

Feature-rich Input Validation & Mask Plugin, Inner Form Validation Plugin/Github, jquery form validation plugin

Inner-Form-Validation-Demo


See Demo And Download

Official Website(Innercodetech): Click Here

This superior jQuery/javascript plugin is developed by Innercodetech. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *