Validate Captcha with TextBox value using JavaScript on Button Click in ASP.Net

y@1998
 
on Oct 11, 2019 12:19 AM
Sample_182238.zip
1663 Views

i want  to validate my captch when my form is submitted using javascript function but i cant access it on submit. I cant validate my textbox or input value with the javascript function on submit

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="project29.WebForm2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">


</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <body onload="createCaptcha()">
    <asp:Label ID="batch" runat="server" Text=""></asp:Label>
    <asp:Label ID="batch1" runat="server" Text=""></asp:Label>
    <asp:Label ID="name" runat="server" Text=""></asp:Label>
    <asp:Label ID="type" runat="server" Text="" Visible="false"></asp:Label>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <center>
 <div class="form-gap"></div>
<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
              <div class="panel-body">
                <div class="text-center">
                 
                  <h2 class="text-center"><b>Sign In</b></h2>
                    <div class="modal-footer"></div>
                 <%-- <p>You can reset your password here.</p>--%>
                  <div class="panel-body">
    
                    <form id="register-form" role="form" method="post" onsubmit="validateCaptcha()">
    
                      <div class="form-group">
                        <div class="input-group"><span class="input-group-addon"><i class="fa fa-user"></i></span>
                             <asp:TextBox ID="mail" runat="server" class="form-control" placeholder="abc@gmail.com" ></asp:TextBox>
                             <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*" ForeColor="Red" ControlToValidate="mail"></asp:RequiredFieldValidator>
						</div>
					</div>
                          <div class="form-group">
                        <div class="input-group"><span class="input-group-addon"><i class="fa fa-lock"></i></span>
							 <asp:TextBox ID="password" runat="server" class="form-control" TextMode="Password" placeholder="*********"></asp:TextBox>
                             <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*" ForeColor="Red" ControlToValidate="password"></asp:RequiredFieldValidator>

						</div>
					</div>

                          <input type="text" placeholder="Captcha" id="cpatchaTextBox" class="form-control" required/>
					      <div id="captcha"></div>


                          <asp:Button ID="Button1" runat="server" Text="Sign In" CssClass="btn btn-primary btn-block btn-lg" OnClick="Button1_Click" />
				</div>
					<p class="hint-text"><a href="forgotpass.aspx">Forgot Password?</a></p>
				
			</div>
			<%--<div class="modal-footer"></div>--%>
		</div>
	</div>
</div>     
</center>
</form>
</body>

    <script>
        var code;
        function createCaptcha() {
            //clear the contents of captcha div first 
            document.getElementById('captcha').innerHTML = "";
            var charsArray =
                "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
            var lengthOtp = 6;
            var captcha = [];
            for (var i = 0; i < lengthOtp; i++) {
                //below code will not allow Repetition of Characters
                var index = Math.floor(Math.random() * charsArray.length + 1); //get the next character from the array
                if (captcha.indexOf(charsArray[index]) == -1)
                    captcha.push(charsArray[index]);
                else i--;
            }
            var canv = document.createElement("canvas");
            canv.id = "captcha";
            canv.width = 100;
            canv.height = 50;
            var ctx = canv.getContext("2d");
            ctx.font = "15px Georgia";
            ctx.strokeText(captcha.join(""), 0, 30);
            //storing captcha so that can validate you can save it somewhere else according to your specific requirements
            code = captcha.join("");
            document.getElementById("captcha").appendChild(canv); // adds the canvas to the body element
        }
        function validateCaptcha() {
            event.preventDefault();
            debugger
            if (document.getElementById("cpatchaTextBox").value == code) {
                alert("Valid Captcha")
            } else {
                alert("Invalid Captcha. try Again");
                createCaptcha();
            }
        }

    </script>

</asp:Content>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
pandeyism
 
on Oct 11, 2019 01:22 AM

Hi y@1998,

Refer below sample.

HTML

MasterPage.master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</body>
</html>

CS.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="CS.aspx.cs" Inherits="CS" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <script>
        var code;
        function createCaptcha() {
            document.getElementById('captcha').innerHTML = "";
            var charsArray =
                "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
            var lengthOtp = 6;
            var captcha = [];
            for (var i = 0; i < lengthOtp; i++) {
                var index = Math.floor(Math.random() * charsArray.length + 1);
                if (captcha.indexOf(charsArray[index]) == -1)
                    captcha.push(charsArray[index]);
                else i--;
            }
            var canv = document.createElement("canvas");
            canv.id = "captcha";
            canv.width = 100;
            canv.height = 50;
            var ctx = canv.getContext("2d");
            ctx.font = "15px Georgia";
            ctx.strokeText(captcha.join(""), 0, 30);
            code = captcha.join("");
            document.getElementById("captcha").appendChild(canv);
        }
        function validateCaptcha() {
            event.preventDefault();
            if (document.getElementById("cpatchaTextBox").value == code) {
                alert("Valid Captcha")
            } else {
                alert("Invalid Captcha. try Again");
                createCaptcha();
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <body>
        <asp:Label ID="batch" runat="server" Text=""></asp:Label>
        <asp:Label ID="batch1" runat="server" Text=""></asp:Label>
        <asp:Label ID="name" runat="server" Text=""></asp:Label>
        <asp:Label ID="type" runat="server" Text="" Visible="false"></asp:Label>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <center>
            <div class="form-gap">
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-4 col-md-offset-4">
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="text-center">
                                    <h2 class="text-center">
                                        <b>Sign In</b></h2>
                                    <div class="modal-footer">
                                    </div>
                                    <div class="panel-body">
                                        <form id="register_form" runat="server" role="form" method="post" onsubmit="validateCaptcha()">
                                        <div class="form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                                <asp:TextBox ID="mail" runat="server" class="form-control" placeholder="abc@gmail.com"></asp:TextBox>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
                                                    ForeColor="Red" ControlToValidate="mail"></asp:RequiredFieldValidator>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                                <asp:TextBox ID="password" runat="server" class="form-control" TextMode="Password"
                                                    placeholder="*********"></asp:TextBox>
                                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="*"
                                                    ForeColor="Red" ControlToValidate="password"></asp:RequiredFieldValidator>
                                            </div>
                                        </div>
                                        <input type="text" placeholder="Captcha" id="cpatchaTextBox" class="form-control"
                                            required />
                                        <div id="captcha">
                                        </div>
                                        <asp:Button ID="Button1" runat="server" Text="Sign In" CssClass="btn btn-primary btn-block btn-lg"
                                            OnClick="Button1_Click" />
                                        </form>
                                    </div>
                                    <p class="hint-text">
                                        <a href="forgotpass.aspx">Forgot Password?</a></p>
                                </div>
                            </div>
                        </div>
                    </div>
        </center>
    </body>
</asp:Content>

Code

protected void Button1_Click(object sender, EventArgs e)
{

}

Screenshot