Jquery Form Validation

In this article, we will explore how to perform form validation using jQuery, a popular tool for client-side form validation.

  • Download Jquery Plugin
  • Make HTML Form
  • Add Jquery Library
  • Define Validation Rules
  • Define Error Message
  • Submit Form

Create new html file

    At first you have create new html file in your specific path . Then open the html file that will display the data and add the following code

index.html

<!DOCTYPE html>  
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
 
</head>
<body>
<div class="container">
        <div class="panel panel-default col-sm-offset-2 col-sm-7" style="  background-color:#AED6F1;">
            <h2 align="center">Registration</h2>
            <div class="panel-body">
            <form method="post" action="#" name="registration" class="form-horizontal" enctype="multipart/form-data">

                <div class="form-group">
                <label for="firstname" class="control-label col-sm-4">First Name</label>
                <div class="col-sm-5">
                <input type="text" class="form-control" name="firstname" id="firstname">
                </div>
                </div>

                <div class="form-group">
                <label for="lastname" class="control-label col-sm-4">Last Name</label>
                <div class="col-sm-5">
                <input type="text" class="form-control" name="lastname" id="lastname">
                </div>
                </div>
               
                <div class="form-group">
                    <label for="gender" class="control-label col-sm-4">Gender</label>
                    <div class="col-sm-5">
                        <input type="radio"  name="gender" id="gender" value="Male"><b>Male</b>
                        <input type="radio"  name="gender" id="gender" value="Female"><b>Feamle</b>
                        <input type="radio"  name="gender" id="gender" value="Others"><b>Others</b>
                    </div>
                </div>
               
                <div class="form-group">
                <label for="Blood" class="control-label col-sm-4">Blood Group</label>
                <div class="col-sm-5">
                <select class="form-control" name="blood" id="blood">
                <option value="O+">O+</option>
                <option value="A+">A+</option>
                </select>
                </div>
                </div>
               
                <div class="form-group">        
                <label for="checkbox" class="control-label col-sm-4">Select Technology</label>
                <div class="col-sm-5">
               
                <input type="checkbox" name="technology[]" Value="1"><b>PHP</b>
                <input type="checkbox" name="technology[]" Value="2"><b>MYSQL</b>
                <input type="checkbox" name="technology[]" Value="3"><b>Java</b>
               
                </div>
                </div>


                <div class="form-group">
                <label for="email" class="control-label col-sm-4">Email</label>
                <div class="col-sm-5">
                <input type="email" class="form-control" name="email" id="email">
                </div>
                </div>

                <div class="form-group">
                <label for="password" class="control-label col-sm-4">Password</label>
                <div class="col-sm-5">
                <input type="password" class="form-control" name="password" id="password">
                </div>
                </div>
               
                <div class="form-group">
                <label for="file" class="control-label col-sm-4">Select File</label>
                <div class="col-sm-5">
                <input type="file" class="form-control" name="filename1" id="file">
                </div>
                </div>
               
                <div class="form-group">
                <label for="textarea" class="control-label col-sm-4">Comments</label>
                <div class="col-sm-5">
                <input type="textarea" class="form-control" rows="3" name="comment" id="comment">
                </div>
                </div>
                   
                <div class="form-group">        
                <div class="col-sm-offset-4 col-sm-10">
                <label><input type="checkbox" name="remember" Value="Accept"> Remember me</label>
                </div>
                </div>
               
                <div class="form-group">    
                <div class="col-sm-offset-4 col-sm-10">
                <input type="submit" name="save" id="save" value="Save Data"/>
                </div>
                </div>
               
            </form>
            </div>
        </div>
</div>
</body>
</html>

Set Jquery Plugin 

Then, You add jquery plugin in your file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

Define Validation Rules and Error Message

Then, define the validation rules and error message use to sample syntax

Jquery Validation Script


<script>
// 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",
      comment: "required",
      filename1: "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: "Enter your firstname",
      lastname: "Enter your lastname",
      comment: "Fill Comments",
      filename1: "Required",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "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();
    }
  });
});
</script>


Full Source Code 


<!DOCTYPE html>  
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
 
</head>
<body>
<div class="container">
        <div class="panel panel-default col-sm-offset-2 col-sm-7" style="  background-color:#AED6F1;">
            <h2 align="center">Registration</h2>
            <div class="panel-body">
            <form method="post" action="#" name="registration" class="form-horizontal" enctype="multipart/form-data">

                <div class="form-group">
                <label for="firstname" class="control-label col-sm-4">First Name</label>
                <div class="col-sm-5">
                <input type="text" class="form-control" name="firstname" id="firstname">
                </div>
                </div>

                <div class="form-group">
                <label for="lastname" class="control-label col-sm-4">Last Name</label>
                <div class="col-sm-5">
                <input type="text" class="form-control" name="lastname" id="lastname">
                </div>
                </div>
               
                <div class="form-group">
                    <label for="gender" class="control-label col-sm-4">Gender</label>
                    <div class="col-sm-5">
                        <input type="radio"  name="gender" id="gender" value="Male"><b>Male</b>
                        <input type="radio"  name="gender" id="gender" value="Female"><b>Feamle</b>
                        <input type="radio"  name="gender" id="gender" value="Others"><b>Others</b>
                    </div>
                </div>
               
                <div class="form-group">
                <label for="Blood" class="control-label col-sm-4">Blood Group</label>
                <div class="col-sm-5">
                <select class="form-control" name="blood" id="blood">
                <option value="O+">O+</option>
                <option value="A+">A+</option>
                </select>
                </div>
                </div>
               
                <div class="form-group">        
                <label for="checkbox" class="control-label col-sm-4">Select Technology</label>
                <div class="col-sm-5">
               
                <input type="checkbox" name="technology[]" Value="1"><b>PHP</b>
                <input type="checkbox" name="technology[]" Value="2"><b>MYSQL</b>
                <input type="checkbox" name="technology[]" Value="3"><b>Java</b>
               
                </div>
                </div>


                <div class="form-group">
                <label for="email" class="control-label col-sm-4">Email</label>
                <div class="col-sm-5">
                <input type="email" class="form-control" name="email" id="email">
                </div>
                </div>

                <div class="form-group">
                <label for="password" class="control-label col-sm-4">Password</label>
                <div class="col-sm-5">
                <input type="password" class="form-control" name="password" id="password">
                </div>
                </div>
               
                <div class="form-group">
                <label for="file" class="control-label col-sm-4">Select File</label>
                <div class="col-sm-5">
                <input type="file" class="form-control" name="filename1" id="file">
                </div>
                </div>
               
                <div class="form-group">
                <label for="textarea" class="control-label col-sm-4">Comments</label>
                <div class="col-sm-5">
                <input type="textarea" class="form-control" rows="3" name="comment" id="comment">
                </div>
                </div>
                   
                <div class="form-group">        
                <div class="col-sm-offset-4 col-sm-10">
                <label><input type="checkbox" name="remember" Value="Accept"> Remember me</label>
                </div>
                </div>
               
                <div class="form-group">    
                <div class="col-sm-offset-4 col-sm-10">
                <input type="submit" name="save" id="save" value="Save Data"/>
                </div>
                </div>
               
            </form>
            </div>
        </div>
</div>
<script>
// 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",
      comment: "required",
      filename1: "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: "Enter your firstname",
      lastname: "Enter your lastname",
      comment: "Fill Comments",
      filename1: "Required",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "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();
    }
  });
});
</script>
</body>
</html>


Finally enter your project url in browser

Conclusion

    We hope this guide has been helpful. If you have any questions or need further assistance, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.