Form validation with jQuery

Create form 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-length: Validates that a given string length is between some minimum and maximum value, data-parsley-length=”[6, 10]”.

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

data-parsley-type: Validates that a value is only digits digits, email, number, integer, alphanum and url. data-parsley-type=”digits”.

 

<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" id="firstName" name="firstName" required data-parsley-required-message="Please enter First Name">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <label>Last Name</label>
                    <input type="text" id="lastName" name="lastName" required data-parsley-required-message="Please enter Last Name">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <label>Mobile</label>
                    <input type="text" id="mobile" name="mobile" required data-parsley-length="[10, 10]" data-parsley-length-message="Please enter a valid mobile number" data-parsley-required-message="Please enter a valid mobile number" data-parsley-type="digits">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <label>Email</label>
                    <input type="email" name="email" id="email" class="no-margin" required data-parsley-required-message="Please enter a valid e-mail address" data-parsley-type="email">
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <label>Message</label>
                    <textarea id="msg" name="msg" required data-parsley-required-message="Please enter a message"></textarea>
                </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.
Yes0
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.