Skip to content
  • Home
  • Contact Us
  • About Us
  • Privacy Policy
  • DMCA
  • Linkedin
  • Pinterest
  • Facebook
thecscience

TheCScience

TheCScience is a blog that publishes daily tutorials and guides on engineering subjects and everything that related to computer science and technology

  • Home
  • Human values
  • Microprocessor
  • Digital communication
  • Linux
  • outsystems guide
  • Toggle search form

Form Validation using Jquery in HTML

Posted on May 2, 2021November 19, 2022 By YASH PAL No Comments on Form Validation using Jquery in HTML

In this tutorial, we are going to learn how to validate a form using jquery in javascript and html. we are going to make a simple Sign Up form in which we will add an Email, Telephone, Password, and Confirm Password field. and then we are going to make a Sign-Up button and when the user clicks on the button then we will process all the fields using jquery before sign up a user.

How to validate a form in Javascript using jquery | Mini Javascript project

Table of Contents

  • Logic to validate a form in javascript using jquery
    • Explanation

Logic to validate a form in javascript using jquery


As you see in the above image if a user does not provide valid input fields then we will show an error using a query on the top of the page. and if the user provides all the details and if the details are valid then we will show a submitted message on the top of the page as you see in the given image below.

How to create and validate a form in Javascript using jquery | Mini Javascript project

Also, feel free to add your own code or CSS for styling the page.  because here am only focusing on the javascript part not much on the styling part.


<!DOCTYPE html>
<html>
<head>
    <title>jquery</title>
    <script src="jquery.min.js"></script>
    <style type="text/css">
        body {

             font-family: helvetica, sans-serif;
             font-size: 130%;
    }
        input {
             padding: 5px 5px 12px 5px;
             font-size: 25px;
             border-radius: 5px;
             border: 1px solid grey;
             width: 320px;
        }
        label {
               position: relative;
               top: 12px;
               width: 200px;
               float: left;   
        }
        #wrapper {

             width: 550px;
             margin: 0 auto;
        }
        .form {

             margin-bottom: 10px;
        }
        #submitbutton {

             width: 130px;
             margin-left: 200px;
        }
        #errormessage {

                 color: red;
                 font-size: 90%, important;
        }
        #success{

             display: none;
             color: green;
             font-weight: bold;
             margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="errormessage">
        </div>
        <div id="success">
         Form submitted!
        </div>
        <div class="form">
    <label for="email">Email</label>
    <input type="text" name="email" id="email" placeholder="yourname@gmail.com">
    </div>
    <div class="form">
    <label for="phone">Telephone</label>
    <input type="text" name="phone" id="phone" placeholder="9999999999">
    </div>
    <div class="form">
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
    </div>
    <div class="form">
    <label for="passwordcofirm">Confirm Password</label>
    <input type="password" name="passwordcofirm" id="passwordcofirm">
    </div>
    <div class="form">
        <input type="submit" id="submitbutton" value="Sign Up">
    </div>
    </div>
<script type="text/javascript">
    function isEmail(email) {
          var regex = /^([a-zA-Z0-9_.+-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
                 return regex.test(email);
    }
   $("#submitbutton").click(function(){
      var errormessage = "";
      var fieldmissing = ""; 

       if ($("#email").val() == "") {
         fieldmissing += "<br>Email";
       }
       if ($("#phone").val() == "") {
         fieldmissing += "<br>Phone";
       }
       if ($("#password").val() == "") {
         fieldmissing += "<br>Password";
       }
       if ($("#passwordcofirm").val() == "") {
         fieldmissing += "<br>Comfirm password";
       }
       if (fieldmissing != "") {
           errormessage += "<p> The following fields are missing:" + fieldmissing; 

       } 
        if (isEmail($("#email").val()) == false) {
                errormessage += " <p>your email address is not valid</p>";
        }  
        if ($.isNumeric($("#phone").val()) == false) {
            errormessage += "<p> your phone humber is not valid </p>";
        }
        if ($("#password").val() != $("#passwordcofirm").val()) {
            errormessage += "<p> your password doesn't match";
        }
        if (errormessage != "") {
            $("#errormessage").html(errormessage);
        }else{
             $("#success").show();
             $("#errormessage").hide();
               }
   });
</script>
</body>
</html>



Explanation


Here first of all we create two div elements errormessage and success inside the wrapper div. these two elements are responsible for showing the error and success messages on the top of the form. at the beginning of the loading of form, these two div will not show because we set the style to none for these two elements.


after that, we created a form element inside which we created four input fields, for Email, Telephone, Password, and Confirm Password, and a Sign-Up button.


now using jquery we will validate the form. first of all, we have created an isEmail function that will take email as an argument and then validate it using regular expression. after that, we set a click action on the Sign-Up button. and check for all the fields in the form.


we will also check if the email is valid. if the phone number is not numeric and the password is not matching with confirm password field. and if there is any error then we will show all the errors or if the fields are valid then it will show the Form Submitted message on the top of the page.


Also, read

  • Code Player Javascript project for students
  • Stopwatch in Javascript
  • Javascript project for practice – Github user information
javascript, project, solutions Tags:html, javascript, jquery

Post navigation

Previous Post: Code Player | Javascript project for Students
Next Post: Difference between Machine Learning and Traditional programming?

Related Posts

Code Player | Javascript project for Students javascript
Add an Custom Snippet for Javascript in Visual Studio Code developer guide
Javascript project for practice | Github User Information javascript
Stop Watch in Javascript programming language. javascript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Pick Your Subject
Human Values

Copyright © 2023 TheCScience.

Powered by PressBook Grid Blogs theme