JQuery Validation – Front End Validation including customized Captcha?

Younger Kid Asked on December 25, 2015 in Jquery.
Add Comment
  • 1 Answer(s)
      $(document).ready(function(){
      
      	//global vars
      	var form = $("#contact");
      	var first_name = $("#first_name");
      	var last_name = $("#last_name");
      	var email_id = $("#email_id");
      	var phone_number = $("#phone_number");
      	var country = $("#country");
      	var subject = $("#subject");
      	var message = $("#message");
      	var num1 = $("#num1");
      	var num2 = $("#num2");
      	var captcha = $("#captcha");
      
      	var f_info = $("#f_info");
      	var l_info = $("#l_info");
      	var email_info = $("#email_info");
      	var phone_info = $("#phone_info");
      	var country_info = $("#country_info");
      	var subject_info = $("#subject_info");
      	var message_info = $("#message_info");
      	var	captcha_info = $("#captcha_info");
      
      	//On blur
      	first_name.blur(validateFirstName);
      	last_name.blur(validateLastName);
      	email_id.blur(validateEmail);
      	phone_number.blur(validatePhone);
      	country.blur(validateCountry);
      	subject.blur(validateSubject);
      	message.blur(validateMessage);
      	captcha.blur(validateCapthca);
      
      	//On key press
      	first_name.keyup(validateFirstName);
      	last_name.keyup(validateLastName);
      	email_id.keyup(validateEmail);
      	phone_number.keyup(validatePhone);
      	country.keyup(validateCountry);
      	subject.keyup(validateSubject);
      	message.keyup(validateMessage);
      	captcha.keyup(validateCapthca);
      
      	//On Submitting
      	form.submit(function(){
      		if(validateFirstName() & validateLastName() & validateEmail() & validatePhone() & validateCountry() & validateSubject() & validateMessage() & emptyCheckpthca() & validateCapthca())
      			return true
      		else
      			return false;
      	});
      
      	//validation functions
      	function validateEmail(){
      		//testing regular expression
      		var a = $("#email_id").val();
      		var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
      		//if it's valid email
      		if(filter.test(a)){
      			email_id.removeClass("error");
      			email_info.html("");
      			email_info.removeClass("error");
      			return true;
      		}
      		//if it's NOT valid
      		else{
      			email_id.addClass("error");
      			email_info.html("Stop cowboy! Type a valid e-mail please");
      			email_info.addClass("error");
      			return false;
      		}
      	}
      	function validateFirstName(){
      		//if it's NOT valid
      		if(first_name.val().length < 4  || first_name.val()== "First Name"){
      			first_name.addClass("error");
      			f_info.html("Please enter first name");
      			f_info.addClass("error");
      			return false;
      		}
      		//if it's valid
      		else{
      			first_name.removeClass("error");
      			f_info.html("");
      			f_info.removeClass("error");
      			return true;
      		}
      	}
      	function validateLastName(){
      		//if it's NOT valid
      		if(last_name.val().length < 4 || last_name.val()== "Last Name"){
      			last_name.addClass("error");
      			l_info.html("Please enter last name");
      			l_info.addClass("error");
      			return false;
      		}
      		//if it's valid
      		else{
      			last_name.removeClass("error");
      			l_info.html("");
      			l_info.removeClass("error");
      			return true;
      		}
      	}
      	function validatePhone(){
      		//if it's NOT valid
      		if(phone_number.val().length < 4 || phone_number.val() == "Phone Number" ){
      			phone_number.addClass("error");
      			phone_info.html("Please enter  valid phone number");
      			phone_info.addClass("error");
      			return false;
      		}
      		//if it's valid
      		else{
      			phone_number.removeClass("error");
      			phone_info.html("");
      			phone_info.removeClass("error");
      			return true;
      		}
      	}
      	function validateCountry(){
      		//if it's NOT valid
      		if(country.val().length < 4   || country.val() == "Select Country" ){
      			country.addClass("error");
      			country_info.html("Please select country");
      			country_info.addClass("error");
      			return false;
      		}
      		//if it's valid
      		else{
      			country.removeClass("error");
      			country_info.html("");
      			country_info.removeClass("error");
      			return true;
      		}
      	}
      	function validateSubject(){
      		//if it's NOT valid
      		if(subject.val().length < 4  || subject.val() == "Subject"){
      			subject.addClass("error");
      			subject_info.html("Please enter the subject");
      			subject_info.addClass("error");
      			return false;
      		}
      		//if it's valid
      		else{
      			subject.removeClass("error");
      			subject_info.html("");
      			subject_info.removeClass("error");
      			return true;
      		}
      	}
      
      	function validateMessage(){
      		//if it's NOT valid
      		if(message.val().length < 10 || message.val() == "Message"){
      			message.addClass("error");
      			message_info.html("Please enter atleast 3 words");
      			message_info.addClass("error");
      			return false;
      		}
      		//if it's valid
      		else{
      			message.removeClass("error");
      			message_info.html("");
      			message_info.removeClass("error");
      			return true;
      		}
      	}
      
      	function emptyCheckpthca(){
      		//it's NOT valid
      		if(captcha.val().length < 1){
      			captcha.addClass("error"); 
      			return false;
      		} 
      		//it's valid
      		else{
      			captcha.removeClass("error");
      			return true;
      		}
      	}
      
      	function validateCapthca(){
      		//it's NOT valid
      
      				var value1 = num1.val();
      				var value2 = num2.val();
      				var result_add = captcha.val();
      				var dataString = 'v1='+ value1 + '&v2=' + value2 + '&res=' + result_add;	
      					var request = $.ajax({
        						url: "captchaverify.php",
      						type: "POST",
        						data: { v1 : value1, v2 : value2, res : result_add },
        						dataType: "html",
      						async: false
      						}).responseText;
      			   if(request == 1){    captcha_info.html(""); return true; } else { 				   
      				captcha.addClass("error"); 
      				captcha_info.html("Please enter correct value");
      				return false;
      				}
      
      	}
      
      });

       Captcha.PHP

      <?php 
      
      $num1 = isset($_POST['v1']) ? $_POST['v1'] : "";
      $num2 = isset($_POST['v2']) ? $_POST['v2'] : "";
      $total = isset($_POST['res']) ? $_POST['res'] : "";
      
      $res = captcha_validation($num1, $num2, $total);
      echo $res;
      
      function captcha_validation($num1, $num2, $total) {
              global $error;
              //Captcha check - $num1 + $num = $total
              if( intval($num1) + intval($num2) == intval($total) ) {
                      $error = 1;
              }
              else {
                      $error = 0;
              }
              return $error;
      }
      
      ?>

       Form in HTML Page

      <form name="contact"   id="contact" method="post" action="process.php" >
          <input name="first_name" id="first_name" type="text" value="First Name" class="inputContact" />
      	<span id="f_info"></span>
          <input name="last_name" id="last_name" type="text" value="Last Name" class="inputContact" />
      	<span id="l_info"></span>
          <input name="email_id" id="email_id" type="text" value="Email" class="inputContact" />
      	<span id="email_info"></span>
          <input name="phone_number" id="phone_number" type="text" value="Phone Number" class="inputContact" />
      	<span id="phone_info"></span>
          <select class="inputSelectContact" id="country" name="country">
          	<option value="Select Country">Select Country</option>
              <option class="Newzland">Country 1</option>
          </select>
      	<span id="country_info"></span>
          <select class="inputSelectContact" id="contact_about" name="contact_about">
          	<option value="">Contact us </option>
      
          </select>
          <input name="subject" type="text" id="subject" value="Subject"  class="inputContact" />
      	<span id="subject_info"></span>
          <textarea class="inputContact" id="message" name="message">Message</textarea>
         <span id="message_info"></span>
          <br />
          <br />
      	<span id="spambot" style="color:#efefef;">(Are you human, or spambot?)</span><br />
      <input id="num1" class="sum" type="text" name="num1" value="<?php echo rand(1,4) ?>" readonly="readonly" /> <span class="icons_sign" style="color:#efefef;">+</span>
      <input id="num2" class="sum" type="text" name="num2" value="<?php echo rand(5,9) ?>" readonly="readonly" /> <span class="icons_sign" style="color:#efefef;">=</span>
      <input id="captcha" class="captcha" type="text" name="captcha" maxlength="2" />
      <span id="captcha_info"></span>
      <br /><br />
          <input type="image" name="submit" src="images/sendMessage.png" class="submitForm"  />
      </form>
      Younger Kid Answered on December 25, 2015.
      Add Comment

      Your Answer

      By posting your answer, you agree to the privacy policy and terms of service.