Validation password and confirm with jQuery

Create password validation with jQuery, we using jQuery library and validation library.

First include both jQuery libraries inside head tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://findtherightpropertyagent.com.au/assets/js/parsley.min.js"></script>

 

Create HTML form and check the below code we added some attributes which used in validation. These attributes are pre-defined of validation library.

Add required attribute on element,

Attributes

data-parsley-required-message: Add your customer error message .

data-parsley-equalto: Validates that the value is identical to another field’s value (useful for password confirmation check). data-parsley-equalto=”#anotherfield”

 

<form id="registerForm">
    <div class="col-xs-12 col-sm-6 col-md-6">
        <div class="left">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <label>First Name</label>
                    <input type="text" required data-parsley-required-message="Please enter First Name">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <label>Password</label>
                    <input type="password" id="pass" required data-parsley-required-message="Please enter password">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <label>Confirm Password</label>
                    <input type="password" required data-parsley-equalto="#pass" data-parsley-required-message="Please enter a coorect password">
                </div>
    		<div class="col-md-4"><button type="submit" class="btn btn-primary">Submit</button></div>
            </div>
        </div>
    </div>
</form>

 

Now bind the form with validation plugin. form:submit set return false if you want to submit form with jQuery or want to use AJAX, Set return true form will submit.

 

$('#registerForm').parsley().on('field:validated', function() {
    var ok = $('.parsley-error').length === 0;
})
.on('form:submit', function() {
    //form not submit, use AJAX or submit with jQuery	
    return false;
});

View Demo

 

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes11
No0
Harinder Singh

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.