Contemporary And Rich Password Strength Validation Plugin – jQuery Form Validation

Form
Demo    Download
jQuery-Form-Validation-Plugin-in-jquery-jquery.validation
File Size: 60.96 KB
Views Total: 1721 views
Last Update:May 28, 2020
Publish Date: April 22, 2014
Official Website: Go to website
License: MIT
Plugin Author: running-coder

jQuery.validation.js is a contemporary and rich validation plugin of jQuery which creates modest user side form validation, password strength validates tranquil, while stagnant offering a plethora of tailored options. It is a multilingual jQuery plugin and has a wide range of validation functions that are needed to validate a particular form.  It is up to you how you can alter your validation form for the processing criteria. The main purpose of the validation plugin is to detect the right and wrong values before submitting the validation form.

How to use it :

Add jquery & css file for jquery-form-validation.js :

<script src="http://jquerypost.com/cdn/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="jquery.validation.js"></script>
<link rel="stylesheet" type="text/css" href="semantic.css">
<link rel="stylesheet" type="text/css" href="common.css">

Add in html form structure:

<form id="form-signin_v3" name="form-signin_v3" method="POST">
 
    <div class="field">
        <label for="signin_v3-username">Username</label>
        <div class="ui left labeled input">
 
            <input id="signin_v3-username" name="signin_v3[username]" type="text" data-validation="[L>=6, L<=18, MIXED]" data-validation-message="$ must be between 6 and 18 characters. No special characters allowed." data-validation-regex="/admin/i" data-validation-regex-reverse="" data-validation-regex-message="The word "Admin" is not allowed in the $">
 
            <div class="ui corner label">
                <i class="asterisk icon"></i>
            </div>
        </div>
    </div>
    <div class="field">
        <label for="signin_v3-password">Password</label>
        <div class="ui left labeled input">
 
            <input id="signin_v3-password" name="signin_v3[password]" type="password" data-validation="[L>=6]" data-validation-message="$ must be at least 6 characters">
 
            <div class="ui corner label">
                <i class="asterisk icon"></i>
            </div>
        </div>
    </div>
 
    <button id="submit-signin_v3" type="submit" class="ui salmon button">
        <i class="heart icon"></i> Custom Submit Button <i class="heart icon"></i>
    </button>
 
</form>

Add Form validation jQuery code :

$('#form-signin_v3').validate({
    submit: {
        settings: {
            clear: "keypress",
            button: 'button#submit-signin_v3',
            errorClass: 'custom-error',
            errorListClass: 'custom-error-list',
            inputContainer: '.field'
        }
    }
});

List Of Version :
  • 1.5.4.3
  • 1.5.4.2
  • 1.5.4.1
  • 1.5.4
  • 1.5.3
  • 1.5.2
  • 1.5.1
  • 1.5.0
  • 1.4.0
  • 1.3.5
  • 1.3.4
  • 1.3.3
  • 1.3.2
  • 1.3.1
  • 1.3.0
  • 1.2.0
  • 1.1.1
  • 1.1.0
  • 1.0.1
  • 1.0.0
  • 0.1.2
  • 0.1.1
  • 0.1.0

Kayla Matthews

Howdy! I'm a web designer and developer. I built CSS-Tricks, a website all about building websites, going strong for 5 years.