jquery validate Form Validation

jquery validate Form Validation

Today, We want to share with you jquery validate Form Validation.In this post we will show you How to Set Up Basic jQuery Form Validation?, hear for jquery form validation demo with source code we will give you demo and example for implement.In this post, we will learn about jQuery Validation Plugin using validator with an example.

jquery validate Form Validation

There are the Following The simple About jquery validate Form Validation Full Information With Example and source code.

As I will cover this Post with live Working example to develop A simple jQuery form validation script, so the Form Validation Using Jquery for this example is following below.

  Bootstrap get active tabs index using jQuery Example

jQuery validator Form Validation

index.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery Form Validation Using validator() - pakainfo.com</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<style>
  .error{
    color: red;
  }
  label,
  input,
  button {
    border: 0;
    margin-bottom: 4px;
    display: block;
    width: 100%;
  }
 .common_box_body {
    padding: 15px;
    border: 10px solid #3d3d3d;
    border-color: #b3d4fc;
    border-radius: 15px;
    margin-top: 10px;
    background: #eee;
}
</style>
</head>
<body>
<div class="common_box_body test">
  <h2>Product Review form</h2>
  <form action="#" name="review_form" id="review_form">
 
    <label for="user_fname">User First Name</label>
    <input type="text" name="user_fname" id="user_fname" placeholder="Kohali"><br>
 
    <label for="user_lname">User Last Name</label>
    <input type="text" name="user_lname" id="user_lname" placeholder="Virat"><br>
 
    <label for="phone">User Phone</label>
    <input type="text" name="phone" id="phone" placeholder="9898225071"><br>  
 
    <label for="email">User Email</label>
    <input type="email" name="email" id="email" placeholder="[email protected]"><br>
 
    <label for="password">User Password</label>
    <input type="password" name="password" id="password" placeholder=""><br>
 
    <input name="submit" type="submit" id="submit" class="submit" value="Submit">
  </form>
</div>
 <script>
$(document).ready(function(){
  $("#review_form").validate({
    rules: {
      user_fname: "required",
      user_lname: "required",
      email: {
        required: true,
        email: true
      },      
      phone: {
        required: true,
        digits: true,
        minlength: 10,
        maxlength: 10,
      },
      password: {
        required: true,
        minlength: 5,
      }
    },
    messages: {
      user_fname: {
      required: "Please enter first name",
     },      
     user_lname: {
      required: "Please enter last name",
     },     
     phone: {
      required: "Please enter phone number",
      digits: "Please enter valid phone number",
      minlength: "Phone number field accept only 10 digits",
      maxlength: "Phone number field accept only 10 digits",
     },     
     email: {
      required: "Please enter your email address",
      email: "Please enter a valid email address.",
     },
    },
  
  });
});
</script>
</body>
</html>

Web Programming Tutorials Example with Demo

Read :

  Laravel Delete Record using jquery Ajax Request

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery validate Form Validation.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.