jQuery Custom Captcha - Math Version
HTML
<form method="post" action="" role="form">
<fieldset class="input-field">
<input type="text" name="value" placeholder="Any Value">
</fieldset>
<fieldset class="bot-field">
What is: <span class="BotQuestion"></span> = <input type="number" class="BotAnswer" placeholder="Answer" autocomplete="off">
</fieldset>
<small>
Add the 2 numbers and place it on the answer field.
</small>
<div class="section-button">
<input type="submit" name="access" value="Access">
</div>
<div class="wrong-answer">Wrong Calculation! Please try again.</div>
</form>
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form {
position: absolute;
top: 50%; left: 50%;
background: #FFF;
font: 400 14px sans-serif;
width: 300px; max-height: 300px;
padding: 30px;
border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.15);
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
/* If Answer return false, show message */
form.has-error .wrong-answer {
opacity: 1;
transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
}
fieldset {
display: block;
width: 100%;
margin: 0 0 15px;
}
.input-field input[type="text"] {
width: 100%;
height: 34px;
padding: 5px 15px;
}
.bot-field {
font: 300 11px sans-serif;
color: #888;
height: 36px;
padding: 0 13px;
border: 1px solid #CCC;
}
.bot-field .BotQuestion {
margin-right: 5px;
}
.bot-field input[type="number"] {
width: 40%;
height: 34px;
margin-left: 5px;
padding: 5px 0;
border: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.section-button {
margin: 15px 0;
}
.section-button input[type="submit"] {
background: #336699;
font-size: 12px;
color: #FFF;
padding: 7px 15px;
border-radius: 4px;
border: none;
}
small {
font-size: 12px;
}
.wrong-answer {
display: block;
background: #DA314B;
font-size: 11px;
color: #FFF;
text-align: center;
padding: 5px 15px;
opacity: 0;
}
JAVASCRIPT
$(function(){
var n1 = Math.round(Math.random() * 10 + 1),
n2 = Math.round(Math.random() * 10 + 1);
$('.BotQuestion').text(n1 + " + " + n2);
$('input[type="submit"]').on('click', function(){
if (eval($('.BotQuestion').text()) != $('.BotAnswer').val()) {
$('form').addClass('has-error');
return !1;
} else {
$('form').toggleClass('has-error');
}
});
});
2 Responses