Create a CAPTCHA verification form with JS (not server-side)

Create a CAPTCHA verification form with JS (not server-side) - javascript

I want to create a captcha to stop spammers, but don not have the knowhow to use php and MySql to create server-side validation.
Any help would be appreciated...

I'd recommend to use a static "dummy.html" for the , because simple spammers will parse this and send an HTTP post request, bypassing the captcha validation.
For serious spammers, a client-side solution will never suffice.
Here's a basic implementation of what I mean:
https://jsfiddle.net/goyqdv7z/1/
<html>
<!-- action="invalid_captcha.html" IMPORTANT! SEE BELOW.! -->
<form method="post" id="idForm" action="invalid_captcha.html">
Form text goes here...<br/>
<div id="idCaptcha"/></div>
<input type="submit" value="Go!">
</form>
// 1. add a <div id="idCaptcha" into your <form action="invalid_caption.html" />
// 2. Replace the ULR
function CreateCaptcha() {
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 captchaCode = a + ' ' + b + ' ' + ' ' + c + ' ' + d ;
document.getElementById("idCaptcha").innerHTML =
'<div >Please type the following figures: '+a+', '+b+', number '+c+' and number '+d+'</div>'
+'<input type="text" id="txtInputCaptcha" onkeyup="onChangeCaptcha();">'
+'<input type="hidden" id="idCaptchaHidden" value="'+captchaCode+'">'
;
}
CreateCaptcha();
function ValidCaptcha() { // valida los numeros ingresados
var str1 = removeSpaces(document.getElementById('idCaptchaHidden').value);
var str2 = removeSpaces(document.getElementById('txtInputCaptcha').value);
return (str1 == str2);
}
function removeSpaces(string) {
return string.split(' ').join('').split(',').join('');
}
function onChangeCaptcha(){
if(ValidCaptcha()){
var form = document.getElementById("idForm");
form.action = form.action.replace("invalid_captcha.html", "mailform.php");
form.style="background-color:#cfc;";
document.getElementById("idCaptcha").style='display:none;';
}
}
</html>

HTML:
<!DOCTYPE html>
<html>
<head><title>JS Captcha by Ian L. of Jafty.com</title>
<style>
body{
background-color: #430000;
}
</style>
</head>
<body>
<form name="review" ACTION="newpg.html" METHOD="POST" onsubmit="return checkform(this);">
<font color="#DD0000">Enter Code ></font> <span id="txtCaptchaDiv" style="background-color:#A51D22;color:#FFF;padding:5px"></span>
<input type="hidden" id="txtCaptcha" />
<input type="text" name="txtInput" id="txtInput" size="15" />
<input type="submit" value="Submit"/>
</form>
Javascript:
function checkform(theform){
var why = "";
if(theform.txtInput.value == ""){
why += "- Security code should not be empty.\n";
}
if(theform.txtInput.value != ""){
if(ValidCaptcha(theform.txtInput.value) == false){
why += "- Security code did not match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
//Generates the captcha function
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("txtCaptcha").value = code;
document.getElementById("txtCaptchaDiv").innerHTML = code;
// Validate the Entered input aganist the generated security code function
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('txtInput').value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
This is just a simple one with no styling, however it works fine.

There are many automatic third party solutions for captchas such as ReCaptcha. But here you can find the explanationon how such technology actually works

Related

The second response is not displayed in JavaScript?

I enter 2 x and z coordinates. And the response should display 2 responses.
1 answer — Sum to the number 600. 2 answer - Difference from the number 600.
I have only entered one response, and then to the second script, not the first.
https://www.w3schools.com/code/tryit.asp?filename=GMFS5UGR7FWC
<!DOCTYPE html>
<html>
<body>
<script>
var x, y, c;
var outputText;
function validate() {
// get the input
x = document.forms["input_form"]["aterm1"].value;
y = document.forms["input_form"]["aterm2"].value;
// validate a, b and c
if (x == 0) {} else {
// calculate
var a1 = x;
var a2 = y;
var a3 = 600;
var a4 = (a1 +++ a3);
var a5 = (a2 +++ a3);
outputText = "<h>" + a4 + ", " + a5 + "</h> ";
}
// output the result (or errors)
document.getElementById("1").innerHTML = outputText;
}
</script>
<script>
var x, y, c;
var outputText;
function validate() {
// get the input
x = document.forms["input_form"]["aterm1"].value;
y = document.forms["input_form"]["aterm2"].value;
// validate a, b and c
if (x == 0) {} else {
// calculate
var a1 = x;
var a2 = y;
var a3 = 600;
var a4 = (a1 --- a3);
var a5 = (a2 --- a3);
outputText = "<h>" + a4 + ", " + a5 + "</h> ";
}
// output the result (or errors)
document.getElementById("2").innerHTML = outputText;
}
</script>
<h type="x">X</h>
<h type="z">Z</h>
<form name="input_form" action="javascript:validate();">
<input type="text1" name="aterm1" size="5" required>
<input type="text2" name="aterm2" size="5" required>
<input type="submit" value="Готово">
</form>
<p type="ygol1" id="1">Первый угол</p>
<p type="ygol2" id="2">Второй угол</p>
</div>
</body>
</html>

You can't have two functions with the same name. The second one will overwrite the first one. If you need to perform two calculations, use two functions and perhaps a parent function to call them both.
function validate() {
sum();
difference();
}
function sum() {
// calculate the sum
}
function difference() {
// calculate the difference
}
and then in your form you call validate() which is a weird name by the way, for a function that doesn't validate anything. Use good names for your functions so they do what they say, it makes your code easy to read.
<form name="input_form" action="javascript:validate();">

<!DOCTYPE html>
<html>
<body>
<h type="x">X</h>
<h type="z">Z</h>
<form name="input_form" action="javascript:validate();">
<input type="text1" name="aterm1" size="5" required>
<input type="text2" name="aterm2" size="5" required>
<input type="submit" value="Готово">
</form>
<p type="ygol1" id="1">Первый угол</p>
<p type="ygol2" id="2">Второй угол</p>
<script>
function validate() {
// get the input
var x = document.forms["input_form"]["aterm1"].value;
var y = document.forms["input_form"]["aterm2"].value;
// output the result (or errors)
document.getElementById("1").innerHTML = "<h>" + (x + 600) + ", " + (y + 600) + "</h>";
document.getElementById("2").innerHTML = "<h>" + (x - 600) + ", " + (y - 600) + "</h>";
}
</script>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=GMFZ3DNB6ELT

Include a captcha in a Tpl Form

Hi I try to include a Captcha script inside a .Tpl form but if I write the correct email and not fill the captcha Simple the form jump the captcha
The form look to word and the captcha show the numbers. I try different combinations with onsubmit="return checkform(this);" value="{{$submit}}
but nothing look to words
any ideas please?
<div class="generic-content-wrapper-styled">
<h3>{{$title}}</h3>
<p id="lostpass-desc">
{{$desc}}
</p>
<form action="lostpass" method="post" >
<div id="login-name-wrapper">
<label for="login-name" id="label-login-name">{{$name}}</label>
<input type="text" maxlength="60" name="login-name" id="login-name" value="" />
<input type="submit" name="submit" id="lostpass-submit-button" onsubmit="return checkform(this);" value="{{$submit}}"/>
</div>
<!-- START CAPTCHA -->
<br>
<div class="capbox">
<div id="CaptchaDiv"></div>
<div class="capbox-inner">
Type the above number:<br>
<input type="hidden" id="txtCaptcha">
<input type="text" name="CaptchaInput" id="CaptchaInput" size="15"><br>
</div>
</div>
<br><br>
<!-- END CAPTCHA -->
<div id="login-extra-end"></div>
<div id="login-submit-end"></div>
</form>
<script type="text/javascript">
// Captcha Script
function checkform(theform){
var why = "";
if(theform.CaptchaInput.value == ""){
why += "- Please Enter CAPTCHA Code.\n";
}
if(theform.CaptchaInput.value != ""){
if(ValidCaptcha(theform.CaptchaInput.value) == false){
why += "- The CAPTCHA Code Does Not Match.\n";
}
}
if(why != ""){
alert(why);
return false;
}
}
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("txtCaptcha").value = code;
document.getElementById("CaptchaDiv").innerHTML = code;
// Validate input against the generated number
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById('txtCaptcha').value);
var str2 = removeSpaces(document.getElementById('CaptchaInput').value);
if (str1 == str2){
return true;
}else{
return false;
notice( t('No valid account found.') . EOL);
goaway(z_root());
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</div>

Captcha JavaScript, should work but

It just wont generate random numbers and input them in span id "broj1" and "broj2". This should work and i cant find any obvious error cause im still new to this. Thanks for help in advance :)
function potvrda(){
var odgovor = document.getElementById("odgovor").value;
var broj1 = parseInt(document.getElementById("broj1").innerHTML);
var broj2 = parseInt(document.getElementById("broj2").innerHTML);
var zbroj = broj1 + broj2;
if (odgovor == null || odgovor ==""){
alert("Molimo unesite zbroj");
return false;
}
else if(odgovor != zbroj){
alert("Molimo unesite ispravan Broj");
}
else{
document.getElementById("status").innerHTML = "processing";
docuemnt.getElemtntById("odgovor").innerHTML = "";
}}
function randomNums(){
var ran_num1 = Math.floor(Math.random() * 10) +1 ;
var ran_num2 = Math.floor(Math.random() * 10) +1 ;
document.getElementById("broj1").innerHTML = rand_num1;
document.getElementById("broj2").innerHTML = rand_num2;
}
</script>
<form method="post" onsubmit="return potvrda();">
Zbrojite:
<span id="broj1"></span> + <span id="broj2"></span>=</br>
<input type="text" id="odgovor" size="50" /> </br>

You are defining var ran_num1 and var ran_num2, but then you are trying to set the innerHTML of the elements to rand_num1 and rand_num2. You're missing a "d". This fiddle is working for me: http://jsfiddle.net/68NKQ/

Javascript onkeydown function runs and then display goes away

first time on the website, anyway my problem is that when I use onkeydown and then use GetChar to check if the enter key was pressed, when operAtion runs,the results of the function only shows on the screen for about a second and then goes away, if the user uses the onclick (clicks the enter button), then this problem doesnt occur. How do I get the result of operAtion to stay on the screen when onkeydown is used. The website is sqrtcalc.comze.com if you want to see what I mean
sqrtcalc
<!DOCTYPE html>
<html>
<head>
<title>Square Root Calculator</title>
<script language="javascript">
function operAtion (form){
var x = form.inputbox.value;
if (isNaN(x)){
//document.write("lawl");
var y = "Enter a number";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else if (x < 0){
var y = "Number must be positive";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else if (x == ""){
var y = "uhm, you didnt enter anything";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else {
var y = Math.pow(x, 1/2)
document.getElementById("demo").innerHTML = "The square root of " + x + " is " + y;
document.getElementById("failsafe").innerHTML = "";
}
}
function GetChar (event,form){
var keyCode = event.keyCode;
if (keyCode == 13){
operAtion(form);
}
}
</script>
<p></p>
</head>
<body>
<form name="myform" action="" method="get" style = "font-size:50px"><strong>Square Root Calculator</strong></br>
</br>
<input type="text" name="inputbox" value = "" onkeydown = "GetChar(event,this.form);"> </br>
</br>
<input id="button" type="button" name="button" value=" Enter " onclick="operAtion(this.form)" >
</form>
<h1 id = "failsafe"></h1>
</br>
</br>
</br>
<h1 id = "demo"></h1>
</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<img border="0" src="http://counter.rapidcounter.com/counter/1353157574/a"; ALIGN="middle" HSPACE="4" VSPACE="2" style = "padding-left:1400px;">
</body>
</html>

Add this code:
window.onload = function(){
document.getElementById("myform").onsubmit = function(){
return false;
}
}
And add the id attribute id="myform" to the <form> tag.

I refactored your code a little:
I removed your inline functions (inline JS isn't exactly best
practice)
I added an ID to your form so it could be referenced
I added return false; to keep the form from submitting
onsubmit handles both click and enter
Javascript
document.getElementById('myform').onsubmit = function() {
var x = this.inputbox.value;
if (isNaN(x)) {
//document.write("lawl");
var y = "Enter a number";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else if (x < 0) {
var y = "Number must be positive";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else if (x == "") {
var y = "uhm, you didnt enter anything";
document.getElementById("failsafe").innerHTML = y;
document.getElementById("demo").innerHTML = "";
} else {
var y = Math.pow(x, 1 / 2)
document.getElementById("demo").innerHTML = "The square root of " + x + " is " + y;
document.getElementById("failsafe").innerHTML = "";
}
return false;
}
HTML
<form name="myform" action="" method="get" style="font-size:50px" id="myform"><strong>Square Root Calculator</strong><br>
<br>
<input type="text" name="inputbox"> <br>
<br>
<input id="button" type="submit" name="button" value=" Enter ">
</form>
<h1 id="failsafe"></h1>
<h1 id="demo"></h1>
Working demo

How to create simple javascript/jquery client side captcha?

How to create simple javascript/jquery client side captcha?

Why don't you use reCAPTCHA ? It's free, very efficient, and provides accessibility functionnalities.

It can be done with HTML and a simple JavaScript code. Have a look at this:
function Captcha(){
var alpha = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'0','1','2','3','4','5','6','7','8','9');
var i;
for (i=0;i<6;i++){
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("mainCaptcha").innerHTML = code
document.getElementById("mainCaptcha").value = code
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2){
return true;
}else{
return false;
}
}
function removeSpaces(string){
return string.split(' ').join('');
}
.capt{
background-color:grey;
width: 300px;
height:100px;
}
#mainCaptcha{
position: relative;
left : 60px;
top: 5px;
}
#refresh{
position:relative;
left:230px;
width:30px;
height:30px;
bottom:45px;
background-image: url(rpt.jpg);
}
#txtInput, #Button1{
position: relative;
left:40px;
bottom: 40px;
}
<link rel="stylesheet" type="text/css" href="estilo.css" />
<script type="text/javascript" src="script.js"></script>
<body onload="Captcha();">
<div class="capt">
<h2 type="text" id="mainCaptcha"></h2>
<p><input type="button" id="refresh" onclick="Captcha();"/></p> <input type="text" id="txtInput"/>
<input id="Button1" type="button" value="Check" onclick="alert(ValidCaptcha());"/>
</div>
</body>

here you are ;)
var captchaText;
$(function() {
var pre = $('#captcha');
captchaText = pre.text();
pre.text('');
var lines = ['', '', '', '', '']
for (var ixLetter = 0; ixLetter < captchaText.length; ixLetter++) {
var letter = captchaText.substr(ixLetter, 1);
var letterLines = letters[letter];
for (var ix = 0; ix < 5; ix++) {
lines[ix] = lines[ix] + ' ' + letterLines[ix];
}
}
for (var ix = 0; ix < 5; ix++) {
pre.append(lines[ix] + '\n');
}
});
function check() {
if ($('#captchaCheck').val() == captchaText) {
alert('you are probably human');
} else {
alert('you probably made a mistake. Don\'t worry. To err is also human.');
}
}
var letters = {
h: [
'HH HH',
'HH HH',
'HHHHHH',
'HH HH',
'HH HH'
],
i: [
'II',
'II',
'II',
'II',
'II'
]
// etc
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre id="captcha">hi</pre> Please type what you see: <input id="captchaCheck" /> <input type="button" value="Check" onclick="check()" />

I agree with all the comments that client side captcha is fundamentally flawed, and I don't know know tough the hurdles have to be to mitigate any amount of spam...
To get an impression of what you're up against, though, check xRumer and GSA in action: YouTube: xEvil vs GSA Captcha Breaker
The software is also able to gather and decipher artificial intelligence such as security questions (i.e. what is 2+2?) often used by forums upon registration. Since the latest version of XRumer, the software is capable of collecting such security questions from multiple sources and is much more effective in defeating them.
wikipedia.org/wiki/XRumer
References:
How do spambots work? - Webmasters Stack Exchange (2010!)
BotDetect: Pure JavaScript CAPTCHA Validation Problems
So, caveats aside, here's a trivial alternative using HTML5 validation that's probably as ineffective as the other posts here! Presumably spambots would just add formnovalidate before submission, and would identify a honeypot field.
<form class="input">
<label for="number" class="title">
What is three plus four?
</label>
<br>
<input
name="number"
required="required"
pattern="(7|seven)"
oninvalid="this.setCustomValidity('Sorry, please enter the correct answer')"
oninput="this.setCustomValidity('')"
>
<!-- Bonus honeypot field, hidden from the user. The server should discard this response if it contains any input -->
<input name="decoy" style="display: none;" />
<input type="submit">
</form>

Client-Side captchas do not provide the protection a server-generated captcha would because the server can not check if the solved captcha is solved correctly.

That is not possible.
You could create something that looks like a CAPTCHA, but it would only run when it's not needed, i.e. when the page is shown in a browser. When it's needed it won't run, as the program trying to break in won't run the client side script.

function Captcha(){
var alpha = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z',
'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
'0','1','2','3','4','5','6','7','8','9');
var i;
for (i=0;i<6;i++){
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f + ' ' + g;
document.getElementById("mainCaptcha").innerHTML = code
document.getElementById("mainCaptcha").value = code
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById('mainCaptcha').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2){
return true;
}else{
return false;
}
}
function removeSpaces(string){
return string.split(' ').join('');
}
<h1 This works pretty well. </h1>

if your purpose is to simply deflect most bots, you might be able to get away with a simple script that chooses 2 numbers at random and asks user to add them.

Try this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
/* created dynamically by server when preparing the page */
// f function is on server and not known by bot and is random per result
// maybe bcrypt with a unique salt per request
var encodedResult = "f('X')";
var serverRenderedPositionSequence = [
[0,0],
[10,10],
[20,20],
[30,30],
[40,40],
[50,50],
[60,60],
[70,70],
[80,80],
[90,90],
[100,100],
[100,100],
[100,100],
[100,100],
[100,100],
[100,0],
[90,10],
[80,20],
[70,30],
[60,40],
[50,50],
[40,60],
[30,70],
[20,80],
[10,90],
[0,100]
];
window.index = 0;
window.move=function(but){
but.style.left = (serverRenderedPositionSequence[window.index][0]+"px");
but.style.top = (serverRenderedPositionSequence[window.index][1]+"px");
window.index++;
if(window.index<serverRenderedPositionSequence.length)
{
setTimeout(function(){
window.move(but);
},125);
}
}
window.onload=function(){
var but = document.getElementById("decoy-button");
window.index=0;
window.move(but);
};
function post()
{
// do something with
var xhrData= {
encodedResult:encodedResult,
result:document.getElementById('result').value
};
var postXhr=function(){ /* HTTP POST */}
// server checks if decoded "encoded result" is equal to the result (X here)
postXhr(xhrData);
}
</script>
</head>
<body>
<input id="result" type="text" value="Enter the message you see" />
<input id="test" onclick="post()" type="button" value="Post" />
<input id="decoy-button" type="button" value=" click me bot" style="width:0px;padding:0;position:absolute; left:0px; top:0px;" />
<input id="secret" type="button" onclick="window.index=0;move( document.getElementById('decoy-button'))" value="repeat sequence" />
</body>
</html>
Then the server would only use bcrypt to check if result is true.
Since the pattern matching requires dynamically observing the screen, it would cause some bots to fail. These would fail:
bots that click to post button immediately
bots that don't run javascript
bots that mis-click the decoy buttons
bots that can't understand the leap between coordinates in the sequence
for example when drawing X, it leaps from bot-right to top-right effectively drawing a vertical line on imaginary plane which may trick some bots easily
bots that use OCR with "fixed" screenshot timings
To further obfuscate any "canvas" hack, the server could add quick random bursts (with decreased latency between leaps) into the sequence such that resulting image would look unrecognizable but human will see what it writes between those random bursts.
To add one more depth, you can ask a math problem like
1+1
instead of just string.
But, when a bot memoizes the encoded result and re-sends it, the security is broken. So, have a "session" for client and not send any encoded result. Just the randomized sequence and check for result only by server-side. Of course the session also costs database time/space but at least website admin/editor does not see spam on the control panel of website.

please try this
<script type="text/javascript">
$('#submitcapt').click(function(){
var captval = "This will not do nothing";
$.ajax({
type : "POST",
url : "externals/reCaptcha/ajaxaction.php",
data : {loadval:captval},
success : function( msg ) {
if(msg=="1"){
}else{
}
}
})
});
</script>
In ajaxaction.php please put the following code
<?php
session_start();
$val=$_POST['loadval'];
$message= $_SESSION['random_number'];
if($val==$message) {
echo "1";
}else{
echo "2";
}
?>

$(document).ready(function() {
DrawCaptcha();
});
function refreshCap() {
DrawCaptcha();
}
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;
var test = document.getElementById("ContentPlaceHolder1_txtCapcha").value = code;
alert(test);
}
function ValidCaptcha() {
var str1 = removeSpaces(document.getElementById('ContentPlaceHolder1_txtCapcha').value);
var str2 = removeSpaces(document.getElementById('ContentPlaceHolder1_txtinputCapcha').value);
if (str1 != str2) {
alert("Properly enter the Security code.");
document.getElementById('ContentPlaceHolder1_txtinputCapcha').focus() return false;
}
}
function removeSpaces(string) {
return string.split(' ').join('');
}

We Keep Coding

JavaScript is the programming language of the Web.

Create a CAPTCHA verification form with JS (not server-side) - javascript

I want to create a captcha to stop spammers, but don not have the knowhow to use php and MySql to create server-side validation. Any help would be appreciated...

There are many automatic third party solutions for captchas such as ReCaptcha. But here you can find the explanationon how such technology actually works

Related

The second response is not displayed in JavaScript?

Include a captcha in a Tpl Form

Captcha JavaScript, should work but

Javascript onkeydown function runs and then display goes away

How to create simple javascript/jquery client side captcha?

Categories

Resources