How to implement form validation in javascript/jquery

Table of Contents

You landed on right page, Here I will teach you an easy way to implement form validation in javascript/jquery. Before we start I am hoping that you know well how to make form in html right? if yes then lets start what you need to make form validation. There are many ways to validate a form but here we are going to discuss only two main and super duper easy methods.

How to validate using HTML – Super easy
Using jQuery validating our form

How to implement form validation in HTML

I know you will skip this part but still i want to make you familiar with what is html :

HTML stands for Hyper Text Markup Language and it is the standard markup language for creating Web pages. It describes the structure of a Web page/Web Pages. The HTML consists of a series of elements and these HTML.

Now HTML has inbuilt feature for forms to validate itself by not adding any extra hustle. Its super duper easy . You just need to make the input fields required. Let me show you with an easy example.

Requirements to implement form validation in HTML:

Bootstrap css for designing but still optional if you choose other methods to design you website.

I love using bootstrap it saves lot of time. Here is the html code to add form validation.


<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.isharansaini.com/wp-content/cache/min/1/bootstrap/4.3.1/js/bootstrap.min.js?ver=1697903030" defer></script>
<div class="container pt-4"><form action="index.php" method="post">
<div class="form-group"><label for="">Email address</label>
<input class="form-control" name="email" required="" type="email" placeholder="Enter email" /></div>
<div class="form-group"><label for="">Password</label>
<input class="form-control" name="password" required="" type="password" placeholder="Password" /></div>
<input class="btn btn-primary" type="submit" value="Submit" />

</form></div>

How to implement form validation using jQuery

Now let talk about with more advance robust feature of JavaScript/jQuery to validate html form.

Requirements to implement form validation in jQuery:

jQuery main js file
jQuery validation js file

Its your choice to use cdn link for these files or to download files to your server. Here I’m giving you cdn links for the files

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js

Steps :

Include these two files in header
Create a form and assign it an ID.
in <script></script> tag use this id to validate your form fields.
in head tag add a class to show error messages in red color->

.error{

color: red;

}
Please follow the below example i have given with the form.


<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.isharansaini.com/wp-content/cache/min/1/ajax/libs/jquery/3.4.1/jquery.min.js?ver=1697903030"></script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.isharansaini.com/wp-content/cache/min/1/bootstrap/4.3.1/js/bootstrap.min.js?ver=1697903030" defer></script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.isharansaini.com/wp-content/cache/min/1/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js?ver=1697903030" defer></script>

<style>
    .error{<br />      color: red;<br />    }<br />  </style>

 
<div class="container pt-4"><form id="formid" action="index.php" method="post">
<div class="form-group">        <label for="">Email address</label>
<input class="form-control" name="email" type="email" placeholder="Enter email" /></div>
<div class="form-group">        <label for="">Password</label>
<input class="form-control" name="password" type="password" placeholder="Password" /></div>
<input class="btn btn-primary" type="submit" value="Submit" />

</form></div>
<script type="rocketlazyloadscript" data-rocket-type="text/javascript">
    $(document).ready(function() {
      $("#formid").validate({
        ignore: [],
        debug: false,
        rules: {
          email: {
            required: true,
            email:true
          },
          password: {
            required: true,
          },
        },
        messages: {
          email: "Please Input Your Email",
          password: "Please Input Your Password",
        },
        submitHandler: function(form) {
          form.submit();
        },
      });
    });
  </script>

How to implement form validation in HTML

Requirements to implement form validation in HTML:

How to implement form validation using jQuery

Requirements to implement form validation in jQuery:

Leave a Comment Cancel reply