jQuery Form Validation Using Validate Engine

In this post, we are going to explain to you how to set up basic jQuery form validation using validate engine. Here is the full demonstration with form Here we are going to use a validation plugin to validate our HTML form You can specify validation rules and different error messages for your HTML form as per your requirement.

Here are the Steps for the Implementation of Validation

So, first of all, you have to include jQuery Engine. We need to include v1.x as the validation plugin which is only compatible with jQuery versions lower than 2.0.

You need to download it from jquery.com.
Also, you can download using NPM: $ npm install jquery@1.x –save-dev
You can download it using browser: $ bower install jquery#1.x –save-dev
Use a CDN: https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js

Now please create new HTML file name is index.html and include jQuery min before closing body tag:

<!-- Change the "src" attribute according to your installation path or we can say your folder path --><script src="vendor/jquery/dist/jquery.min.js"></script>

1	<!-- Change the "src" attribute according to your installation path or we can say your folder path --><script src="vendor/jquery/dist/jquery.min.js"></script>

Here we have more detail about NPM if you don’t know what is NPM and how it work don’t hesitate. Please follow below link and go ahead.

Package Management for the Browser with Bower
A Beginner’s Guide to NPM — the Node Package Manager

1. Include jQuery Validation Plugin

Validation plugin play main and effective in validation because all logic are written inside it here we have steps how to download it.

You can download it from the plugin’s website.
Also, you can download it using Bower: $ bower install jQuery-validation
You can download it using NPM: $ npm install jQuery-validation
Use CDN methord https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.m

2. Include Plugins After jQuery Min JS

<!-- Change the "src" attribute according to your installation path r we can say your folder path-->
<script src="../dist/jquery.validate.min.js"></script>

3. Create HTML Student Form

First Name
Last Name
Email ID
Password

Now lets create HTML form which include student information inputs.

<div class="container">
  <h2>Student Registration</h2>
  <form action="your path to submit form" name="student_registration">

    <label for="student_firstname">Student First Name</label>
    <input type="text" name="student_firstname" id="student_firstname" placeholder="marry"/>

    <label for="student_lastname">Student Last Name</label>
    <input type="text" name="student_lastname" id="student_lastname" placeholder="ponting"/>

    <label for="student_email">Email</label>
    <input type="email" name="student_email" id="student_email" placeholder="marry@doe.com"/>

    <label for="student_password">Password</label>
    <input type="password" name="student_password" id="student_password" placeholder="●●●●●"/>

    <button type="submit">Register Student</button>

  </form>
</div>

<h2>Student Registration</h2>

<label for="student_firstname">Student First Name</label>

<label for="student_lastname">Student Last Name</label>

<label for="student_email">Email</label>

<label for="student_password">Password</label>

<button type="submit">Register Student</button>

</form>

</div>

Our html form is ready now make sure that please fill action attribute with your real path when your application is live because form is submitted to the correct destination

4. Create Styles for the Form

Now create new file name is style.css, and include it inside head section of your html file.

<link rel="stylesheet" href="css/style.css"/>

1	<link rel="stylesheet" href="css/style.css"/>

Now copy and paste below CSS code into style.css

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* Styles */
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 500px;
  margin: 25px auto;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}
form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}
 form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
form .error {
  color: #ff0000;
}

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* Styles */

* {

margin: 0;

padding: 0;

}

.container {

width: 500px;

margin: 25px auto;

}

body {

font-family: "Open Sans";

font-size: 14px;

}

form label,

form input,

form button {

border: 0;

margin-bottom: 3px;

display: block;

width: 100%;

}

form {

padding: 20px;

background: #2c3e50;

color: #fff;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

}

form button {

height: 30px;

line-height: 30px;

background: #e67e22;

color: #fff;

margin-top: 10px;

cursor: pointer;

}

form input {

height: 25px;

line-height: 25px;

background: #fff;

color: #000;

padding: 0 6px;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

form .error {

color: #ff0000;

}

5. Create the Validation Rules

Now finally we are reach to initialize the form validation plugin. Now create new folder name JS and create new file name is form-validation.js inside it and reference it. After script tag and then include it on your HTML page.

<script src="js/form-validation.js"></script>

1	<script src="js/form-validation.js"></script>

Copy and paste below code into the newly created file:

<script>
$(function() {
  // Initialization of form validation on our form.
  // Name attribute "student_registration"
  $("form[name='student_registration']").validate({
    // your validation rules
    rules: {
      student_firstname: "required",
      student_lastname: "required",
      student_email: {
        required: true,
       
        email: true
      },
      student_password: {
        required: true,
        minlength: 5
      }
    },
    // validation error messages
    messages: {
      student_firstname: "Please enter your firstname",
      student_lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      student_email: "Please enter a valid email address"
    },
  
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>

$(function() {

// Initialization of form validation on our form.

// Name attribute "student_registration"

$("form[name='student_registration']").validate({

// your validation rules

rules: {

student_firstname: "required",

student_lastname: "required",

student_email: {

required: true,

email: true

student_password: {

required: true,

minlength: 5

}

// validation error messages

messages: {

student_firstname: "Please enter your firstname",

student_lastname: "Please enter your lastname",

password: {

required: "Please provide a password",

minlength: "Your password must be at least 5 characters long"

student_email: "Please enter a valid email address"

submitHandler: function(form) {

form.submit();

}

});

</script>

Conclusion:

Well done that’s it for today. I hope now you have a real idea of how to set up jQuery Form Validation Using Validate Engine. Please keep in your mind that this script doesn’t replace server-side validation. This is still possible for a corrupt user to bypass the validation rules.

You can also read this blog: How to Forcefully Download File in PHP