Contemporary And Rich Password Strength Validation Plugin – jQuery Form Validation

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

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'
        }
    }
});

Done

Thanks for make jQuery plugin is developed by running-coder For more Helpfull for users, please check the demo page or visit the official website.
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.