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: 1197 views
Last Update:April 11, 2020
Publish Date: March 22, 2020
Official Website: Go to website
License: MIT

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


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.