<!DOCTYPE html>
<html>
<head>
<title>Membuat Kode Captcha dengan Javascript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.captcha
{ font: italic bold 16px "Comic Sans MS", cursive, sans-serif;
color:#a0a0a0;background-color:#c0c0c0;
width:100px;border-radius: 5px;
text-align:center;
text-decoration:line-through;
}
.errmsg
{color:#ff0000;}
</style>
<script>
function createCaptcha(){
for(i=0; i<6 ; i++){
if(i %2 ==0){
captcha[i] = String.fromCharCode(Math.floor((Math.random()*26)+65));
}else{
captcha[i] = Math.floor((Math.random()*10)+0);
}
}
var thecaptcha= captcha.join("");
var elm = document.getElementById('captcha');
elm.innerHTML="<span class='captcha'> " + thecaptcha+ " </span>" + " <a onclick='createCaptcha()' class='badge badge-warning' href='#'>recaptcha</a>";
}
window.addEventListener("load",createCaptcha);
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="offset-3 col-7">
<h3>Membuat Kode Captcha dengan Javascript</h3>
<table class="table">
<tr><td>Captcha : </td>
<td id="captcha" colspan="2"></td>
</tr>
<tr>
<td>Type Captcha : </td>
<td><input type="text" name="recaptcha" id="recaptcha" placeholder="Type the captcha" class="form-control"/></td>
<td id="errCaptcha" class="errmsg"></td>
</tr>
<tr>
<td colspan="3" style="text-align:right;">
<input type="button" value="Submit" class="btn btn-sm btn-primary form-control" onClick="validateRecaptcha()"/>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script>
var captcha= new Array ();
function validateRecaptcha(){
var recaptcha= document.getElementById("recaptcha").value;;
var validRecaptcha=0;
for(var j=0; j<6; j++){
if(recaptcha.charAt(j)!= captcha[j]){
validRecaptcha++;
}
}
if (recaptcha == ""){
document.getElementById('errCaptcha').innerHTML = 'Re-Captcha must be filled';
} else if (validRecaptcha>0 || recaptcha.length>6){
document.getElementById('errCaptcha').innerHTML = 'Sorry, Wrong Re-Captcha';
} else{
document.getElementById('errCaptcha').innerHTML = 'OK';
}
}
</script>
</html>
