JavaScript Contact Form Validation

Description:

JavaScript Contact Form Validation HTML Contact Form Form Beautifull Design For the backend designer.who have for need Contact Form.Form need for Contact admin people this is very and Attractive Design also has the form validation.it has full JavaScript form Validation.

Form Information:

Form name: Contract Form with JavaScript Form Validation
CSS : Bootstrap
License: Open Source.
Compatible Browsers: Google Chrome, Firefox, Safari, IE 10, Opera etc.
High Resolution: Yes.
Layout: Fluid Responsive Layout.

You can view another article :

HTML Sign Up Form

HTML5 Element List, tags

5 Best CSS Learning Website

10 best Web Design Learning Site(Free)

Step-1

Create HTML File “index.html”

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Services</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
    </style>
  </head>
  <body>
    <div class="container"><br><br>
      <h1 class="text-center">Contact Us</h1><br>
      <h3 id="success"class="text-success"></h3>
      <div style="background:lightblue;padding:20px;">
         <form action="#" method="post">
        <div class="form-group">
          <label for="usr">Name:</label>
          <input type="text" class="form-control" id="usr" name="username">
          <span class="text-danger" id="name-error"></span>
        </div>
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" name="email">
          <span class="text-danger" id="email-error"></span>
        </div>
        <div class="form-group">
          <label for="subject">Subject:</label>
          <input type="subject" class="form-control" id="subject" name="subject">
          <span class="text-danger" id="subject-error"></span>
        </div>
        <div class="form-group">
          <label for="message">Message:</label>
          <textarea class="form-control" rows="5" id="message"></textarea>
          <span class="text-danger" id="message-error"></span>
        </div>
        </form>
        
        <button id="submit" class="btn btn-primary">Send</button>
      </div>
    </div>
    <script>
      $("#submit").click(function(){
        var name= $("#usr").val();
        var email= $("#email").val();
        var subject= $("#subject").val();
        var message= $("#message").val();
        
        if(name==""){
          $("#name-error").html("Please write your name");
        }else{
          $("#name-error").html("");
        }
        
        if(email==""){
          $("#email-error").html("Please write your Email");
        }else{
          $("#email-error").html("");
        }
        
        if(subject==""){
          $("#subject-error").html("Please write your Subject of message");
        }else{
          $("#subject-error").html("");
        }
        
        if(message ==""){
          $("#message-error").html("Please write your Message");
        }else{
          $("#message-error").html("");
        }
        
        if(name!="" && email!="" && subject!="" && message !=""){
          $("#success").html("hello!! "+name+", Your message is sent");
        }
      });
    </script>
  </body>
</html>

Downlaod Full Source Code :

Downlaod