Home > ASP.Net, Javascript > Captcha Code With Refresh and Validation Using Javascript

Captcha Code With Refresh and Validation Using Javascript


Hi all,

try this example to create Captcha code With Refresh and Validation Using JavaScript With ASP.Net

— ASP.Net


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function DrawCaptcha() {
            var a = Math.ceil(Math.random() * 9) + '';
            var b = Math.ceil(Math.random() * 9) + '';
            var c = Math.ceil(Math.random() * 9) + '';
            var d = Math.ceil(Math.random() * 9) + '';
            var e = Math.ceil(Math.random() * 9) + '';
            var code = a + ' ' + b + ' ' + c + ' ' + d + ' ' + e;
            document.getElementById("imgCaptcha1").src = 'images/letters/' + a + '.jpg';
            document.getElementById("imgCaptcha2").src = 'images/letters/' + b + '.jpg';
            document.getElementById("imgCaptcha3").src = 'images/letters/' + c + '.jpg';
            document.getElementById("imgCaptcha4").src = 'images/letters/' + d + '.jpg';
            document.getElementById("imgCaptcha5").src = 'images/letters/' + e + '.jpg';
            document.getElementById("<%= txtCaptcha.ClientID %>").value = code;
        }

        function ValidateLoginForm(sender, args) {
            var str_input = document.getElementById('<%= txbRegCode.ClientID %>').value;
            var str_captcha = document.getElementById('<%= txtCaptcha.ClientID %>').value;
            if (!ValidCaptcha(str_captcha, str_input)) {
                args.IsValid = false;
                document.getElementById("<%= txbRegCode.ClientID %>").focus();
                True = false;
                return false;
            }
            else {
                args.IsValid = true;
                True = true;
                return true;
            }
        }
        // Validate the Entered input aganist the generated security code function   
        function ValidCaptcha(captcha, input) {
            var str1 = removeSpaces(captcha);
            var str2 = removeSpaces(input);
            if (str1 == str2) return true;
            return false;
        }
        // Remove the spaces from the entered and generated code
        function removeSpaces(string) {
            return string.split(' ').join('');
        }
    </script>
</head>
<body onload="DrawCaptcha();">
    <form id="form1" runat="server" >

        <table>
            <tr>
                <td>

                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>Capatcha Code</td>
                <td>
                    <asp:TextBox ID="txbRegCode" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txbRegCode" Display="Dynamic" 						ErrorMessage="RequiredFieldValidator" SetFocusOnError="True">Enter Code</asp:RequiredFieldValidator>
                    <asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="ValidateLoginForm" ControlToValidate="txbRegCode" 				ErrorMessage="CustomValidator">In-valid Code</asp:CustomValidator>
                </td>
            </tr>
            <tr>
                <td colspan="2">
               <div id="dlCaptch2">
                        <div dir="rtl">
                            <table width="60px" align="right" height="18px" border="1" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="100px" align="center">
                                        <table width="100px" height="18px" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td>
                                                    <img id="imgCaptcha5" alt="" width="18px" height="18px" src="" border="0px" />
                                                </td>
                                                <td>
                                                    <img id="imgCaptcha4" alt="" width="18px" height="18px" src="" border="0px" />
                                                </td>
                                                <td>
                                                    <img id="imgCaptcha3" alt="" width="18px" height="18px" src="" border="0px" />
                                                </td>
                                                <td>
                                                    <img id="imgCaptcha2" alt="" width="18px" height="18px" src="" border="0px" />
                                                </td>
                                                <td>
                                                    <img id="imgCaptcha1" alt="" width="18px" height="18px" src="" border="0px" />
                                                </td>
                                            </tr>
                                        </table>
                                        
                                        <asp:TextBox ID="txtCaptcha" runat="server" style="display:none" ></asp:TextBox>
                                    </td>
                                </tr>
                            </table>
                            <asp:HiddenField ID="CodeValue" runat="server" />
                            <div>
                                &nbsp; <a onclick="DrawCaptcha();" style="cursor: pointer" class="reg-link">Try Another Code </a>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Button ID="Button1" runat="server" Text="Send Message" OnClick="Button1_Click" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <asp:Label ID="lblMesssage" runat="server"></asp:Label>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

— In Code behind :

 protected void Button1_Click(object sender, EventArgs e)
{
char[] charsToTrim = { ' ', '\t' };
if (txbRegCode.Text.Trim() == txtCaptcha.Text.Replace(&amp;quot; &amp;quot;, String.Empty))
{
lblMesssage.Text = &amp;quot;Valid Code&amp;quot;;
}
else
{
lblMesssage.Text = &amp;quot;Invalid Code&amp;quot;;
}
}

Hope this helps

You can download example from here

Good Luck.

Advertisements
Categories: ASP.Net, Javascript
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: