JQuery Validation – Front End Validation including customized Captcha?
$(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>