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>