Contact Form Validation in jQuery

In this example i explain contact form validation in jQuery. jQuery contact form validation is most popular validation for client side validation in web application. Also in this post i explain jquery validate all input fields, jquery validation google recaptcha, google recaptcha validation in php side.

If required filed validator red border and enter input after remove border in jQuery.

Contact Form Validation using jQuery and PHP

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src='https://www.google.com/recaptcha/api.js' async defer ></script>
  <style>
    .error{
        border : 1px solid red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2 class="text-center">Contact form</h2>
  <form method="post" novalidate="novalidate" id="contact_form">
    <div class="row">
        <div class="col-md-12">
            <label>Name</label>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="firstname" id="firstname" class="form-control required">
                        <span>First Name</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <input type="text" name="lastname" id="lastname" class="form-control required">
                        <span>Last Name</span>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
              <label for="email">Email:</label>
              <input type="email" class="form-control required" id="email" placeholder="Enter email" name="email">
              <span id="email_error" class="text-danger"></span>
            </div>
        
            <label>Phone</label>
            <div class="row">
                <div class="col-md-2 text-center">
                    <div class="form-group">
                        <input type="text" name="phone1" id="phone1" class="form-control required" maxlength="3">
                        <span>###</span>
                    </div>
                </div>
                <div class="col-md-2 text-center">
                    <div class="form-group">
                        <input type="text" name="phone2" id="phone2" class="form-control required" maxlength="3">
                        <span>###</span>
                    </div>
                </div>
                <div class="col-md-2 text-center">
                    <div class="form-group">
                        <input type="text" name="phone3" id="phone3" class="form-control required" maxlength="4">
                        <span>####</span>
                    </div>
                </div>
            </div>
                
            <div class="form-group">
              <label for="subject">Subject:</label>
              <input type="text" class="form-control required" id="subject" placeholder="Enter subject" name="subject">
            </div>
                
            <div class="form-group">
              <label for="message">Message:</label>
              <textarea class="form-control required" id="message" placeholder="Enter message" name="message" rows="5"></textarea>
            </div>
            
            <div class="g-recaptcha required" data-sitekey="your_site_key"></div>
            
            <div class="col-md-12 text-center">
                <button type="button" class="btn btn-default">Submit</button>
            </div>
        </div>
    </div>
  </form>
</div>
<script>
    
    $(document).ready(function(){
        $("button").click(function(){
            var regexEmail = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            $('.required').filter(function(){
                if ($.trim(this.value).length == 0){
                    $(this).addClass("error");
                }else{
                    $(this).removeClass("error");
                }           
            });
            
            if($("#firstname").val() == ""){
                $("#firstname").focus();
            }else if($("#lastname").val() == ""){
                $("#lastname").focus();
            }else if($("#email").val() == ""){
                $("#email").focus();
            }else if(!regexEmail.test($("#email").val())){
                $("#email").focus();
                $("#email_error").text("Invalid Email");
            }else if($("#pwd").val() == ""){
                $("#pwd").focus();
            }else if($("#phone1").val() == "" || $("#phone1").val().trim().length != 3){
                $("#phone1").focus();
            }else if($("#phone2").val() == "" || $("#phone2").val().trim().length != 3){
                $("#phone2").focus();
            }else if($("#phone3").val() == "" || $("#phone3").val().trim().length != 4){
                $("#phone3").focus();
            }else if($("#subject").val() == ""){
                $("#subject").focus();
            }else if($("#message").val() == ""){
                $("#message").focus();
            }
            else if(grecaptcha.getResponse() == "") {
                $(".g-recaptcha").addClass("error");
            } else{
                
                var data = new FormData(contact_form);
                $.ajax({
                  url: 'send_request.php',
                  data: data,
                  processData: false,
                  contentType: false,
                  type: 'POST',
                  success: function(data){
                    alert(data);
                  }
                });

            }
        });
    });

</script>
</body>
</html>

send_request.php

Read Also :  Jquery inArray check if value exists in Array

In this step i create php server side google recaptcha validation.

<?php
 
  if(!empty($_POST['g-recaptcha-response']))
  {
        $secret = 'your_site_secret';
        $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
        $responseData = json_decode($verifyResponse);
        if($responseData->success)
            $message = "g-recaptcha varified successfully";
        else
            $message = "Some error in vrifying g-recaptcha";
       echo $message;
   }
?>

I hope you understand form validation in jQuery…