JS Math Captcha

by spydmobile

HTML

<form id="form">
    <input type="text" name="name" placeholder="Name" />
    
    <input type="submit" value="Send" />
</form>

CSS

input {
    background: white;
    border: 1px solid;
    display: block;
    margin-bottom: 10px;
    padding: 5px;
}

JavaScript

$(function(){
    
    var mathenticate = {
        bounds: {
            lower: 5,
            upper: 50
        },
        first: 0,
        second: 0,
        generate: function()
        {
            this.first = Math.floor(Math.random() * this.bounds.lower) + 1;
            this.second = Math.floor(Math.random() * this.bounds.upper) + 1;
        },
        show: function()
        {
            return this.first + ' + ' + this.second;
        },
        solve: function()
        {
            return this.first + this.second;
        }
    };
    mathenticate.generate();
   
    var $auth = $('<input type="text" name="auth" />');
    $auth
        .attr('placeholder', mathenticate.show())
        .insertAfter('input[name="name"]');
    
    $('#form').on('submit', function(e){
        e.preventDefault();
        if( $auth.val() != mathenticate.solve() )
        {
            alert('wrong answer!');
        }
    });
    
});