Sunday 9 October 2016

JQuery Captcha in ASP.NET

This sample demonstrates a simple way to use Jquery Captcha, Validate captcha with matching and Asp.net control validation using JQuery.


Captcha Code 

(function()  
{  
    var cx = '015363721894368854116:4i6ywnkggls';  
    var gcse = document.createElement('script');  
    gcse.type = 'text/javascript';  
    gcse.async = true;  
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +  
        '//www.google.com/cse/cse.js?cx=' + cx;  
    var s = document.getElementsByTagName('script')[0];  
    s.parentNode.insertBefore(gcse, s);  
})();  
  
function DrawCaptcha()  
{  
    var a = Math.ceil(Math.random() * 10) + '';  
    var b = Math.ceil(Math.random() * 10) + '';  
    var c = Math.ceil(Math.random() * 10) + '';  
    var d = Math.ceil(Math.random() * 10) + '';  
    var e = Math.ceil(Math.random() * 10) + '';  
    var f = Math.ceil(Math.random() * 10) + '';  
    var g = Math.ceil(Math.random() * 10) + '';  
    var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' ' + f + ' ' + g;  
    document.getElementById("txtCodeCaptcha").innerHTML = code  
}  
  
// Validate the Entered input aganist the generated security code function     
function ValidTestimonialCaptcha()  
{  
    var str1 = removeSpaces(document.getElementById('txtCodeCaptcha').innerHTML);  
    var str2 = removeSpaces(document.getElementById('TestimonialCAPTCHA').value);  
    if (str1 == str2) return true;  
    return false;  
  
}  
DrawCaptcha();  
  
  
function removeSpaces(str)  
{  
    return str = str.replace(/\s+/g, '');  
}  
  
  
  
  
Validation.js  
  
$(function()  
{  
    $('#reloadCaptcha').click(function()  
    {  
        DrawCaptcha();  
    });  
    $("#submitTestimonialsBtn").click(function()  
    {  
  
        if ($('#txtTestimonialName').val() == '')  
        {  
            $('#txtTestimonialName').prev('.msg').text('Please enter Name.').css('display', 'block');  
            $('#txtTestimonialName').focus();  
            return false;  
        }  
        else  
        {  
            $('#txtTestimonialName').prev('.msg').text('').css('display', 'none');  
        }  
        if ($("#txtTestimonialEmail").val() == "")  
        {  
            $('#txtTestimonialEmail').prev('.msg').text('Please enter an email.').css('display', 'block');  
            $('#txtTestimonialEmail').focus();  
            return false;  
        }  
        else  
        {  
            $("#txtTestimonialEmail").prev('.msg').text('').css('display', 'none');  
        }  
        if ($('#txtTestimonials').val() == "")  
        {  
            $('#txtTestimonials').prev('.msg').text('Please enter testimonial.').css('display', 'block');  
            $('#txtTestimonials').focus();  
            return false;  
        }  
        else  
        {  
            $("#txtTestimonials").prev('.msg').text('').css('display', 'none');  
        }  
        if ($('#TestimonialCAPTCHA').val() == "")  
        {  
            $('#TestimonialCAPTCHA').prev('.msg').text('Please enter valid captcha.').css('display', 'block');  
            $('#TestimonialCAPTCHA').focus();  
            return false;  
        }  
        else if (!ValidTestimonialCaptcha())  
        {  
            $('#TestimonialCAPTCHA').prev('.msg').text('Captcha does not match. Please enter valid captcha').css('display', 'block');  
            $('#TestimonialCAPTCHA').focus();  
            return false;  
        }  
        else  
        {  
            $("#TestimonialCAPTCHA").prev('.msg').text('').css('display', 'none');  
        }  
        $(this).submit();  
    });  
});  

No comments:

Post a Comment