How to create basic Jquery Validation Web Design Layout | Registration Form

How to create basic Jquery Validation Web Design Layout | Registration Form : This basic jQuery Registration form Web Design Layout makes simple clientside form validation easy, whilst still offering plenty of customization options. This tutorial shows you how to set up a basic form validation with jQuery, demonstrated by a registration form. The basic principle of this plugin is to specify validation rules and error messages for HTML elements in JavaScript. jQuery Form Validator is a feature rich and multilingual jQuery plugin that makes it easy to validate user input while keeping your HTML markup clean from javascript code.

You can start coding. Here’s what the validation code might look like if you have a form with 4 different input fields (First Name, Last Name, Email, Password) you’d like to validate.

registrationform

After Form Submitted

formsubmitted

 

This is achieved by grouping together validation functions in “modules”, making it possible to load only those functions that’s needed to validate a particular form. A step by step tutorial on how to use jQuery to setup basic form validation in just a few minutes you can implement form input field validation. That is, we will use JavaScript to validate the fields before submitting the form to the server. This is fast and efficient and provides quick replies to your visitor in the event of any errors. However, it is advisable to also validate the data on the server-side before adding it into the database.

A subject that has been the source of debates ever since Web browsers were born. jQuery Validation can be used to validate forms. There are as many ways to implement form validation as there are opinions of the best way to do it. This article discusses client-side validation using jQuery’s validation plugin.These examples were coded to demonstrate the possibilities and results that can be achieved using this JavaScript plugin.

Use basic Jquery Validation Registration Form

1. How to use Jquery Library direct server link

<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>

2. Create index.html page.

<!DOCTYPE>
<html>
<head>
<title>Form jquery validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 

</head>

<body>
<div class="container">

	<div class="headingh2">
		<h2>Demo Registration Form jquery validation</h2>
	</div>
 
  <form action="submit.htm" name="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="akt"/>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="bt10n"/>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="aktbt10n@bt10n.com"/>

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

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

  </form>
</div> 
</body>
</html>

3. Create style.css file and file location (css/style.css)

/* CSS Document */

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

/* Styles */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

.headingh2
{
    padding: 20px;
    background: #222b5d;
    color: #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-align: CENTER;
}


form {
  padding: 20px;
  background: #E91E63;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}
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 button {
  height: 30px;
  line-height: 30px;
  background: #03A9F4;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
form .error {
  color: #FFEB3B;
}

4. Create form-validation.js file and file location (js/form-validation.js)

// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='registration']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

5. Finaly Use link in index.html file <head> Section. You can copy code and past in index.html file.

<!DOCTYPE>
<html>
<head>
<title>Form jquery validation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/style.css"/>
<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script src="js/form-validation.js"></script>
</head>

Any Query any problem with code pleas comment us. Thank you