We want to prevent bot's from trying to register. There are a lot of options and service's provided by other companies to prevent or somewhat safeguard bot's from attacking your front end application layer. Google's reCAPTCHA is an advanced service which looks at various other factors to ensure the user is not a bot. In this article we see a fun alternative and something different than the usual, where a user is asked to go through image pickers like ?do you see a crosswalk?, ?do you see a boat? etc. This article show's an alternative, with can easily be implementation in your own application.

This sample html form will be basic with no Style Sheet(CSS) features to make it easy to follow. Except for image toggle which is defined in CSS. We will go over the CSS card functionality below under CSS Section. You can always download the entire CSS for this project for reference here Download CSS . Most of the form should be very familiar to most of the readers here, who are familiar with HTML. In the form basic code below we have 3 input's user needs to enter. Email address, Password and what they see as a random number once the user hover's over the image(Pin).

A submit button which submits the form data to JavaScript validateRegisterrecap function. If validateRegisterrecap function passes all validation test's then it will submit the email,password to the backend. Currently we do not need the user to type in any other information like phonenumber, address, full name etc. No one has patience to enter these values anyway to register to most sites to get access. Instead of making the user enter fullname we just strip down email and use the front part of xyzid@company.com we just use xyzid as the username. The full email is used as the user ID through out the system. The PIN images can be changed by providing your own url links (it can be local or remote urls).

Once the user clicks Submit button validatelocalrecap(this) function on the JavaScript is invoked, In the validatelocalrecap method we make sure the email and password are not empty. If they are we alert the user and do nothing until it is resubmitted with no null input. Then we check for email is in a email format and not something like bot---?.coss etc, it should be something more reasonable like someid@somedomain.com or any of the valid .xx extensions of an email.

            
/** @author Ravi Manthena */
function mouseEnter() {
    // this will get us a 4 digit random number
    var x = Math.floor((Math.random() * 999) + 1000);
    document.getElementById("randompin").innerHTML = 'Your Pin : ' + x;
}

function validatelocalrecap(frm)
{
    event.preventDefault();
    if (frm.email.value == "")
    {
        alert("Please enter valid Email");
        frm.email.focus();
        return false;
    }
    // check if the email syntax makes sense
    if (!(ValidateEmailFormat(frm.email.value))) {
        alert("You have entered an invalid email address!");
        frm.email.focus();
        return false;
    }
    
    var pw = frm.password.value; 
    if (pw == "") {
        alert("Password cannot be empty");
        return false;
    }  
    if (pw.length < 8) {
        alert("Password length must be atleast 8 characters");
        return false;
    }
    if (pw.length > 12) {
        alert("Password length must not exceed 15 characters");
        return false;
    }
    
    var genpin = document.getElementById("randompin").innerHTML;
    var pin = frm.pin.value;
    if (genpin.length < 13)
    {
        alert("Please Hoover Over Get Pin");
        return false;
    }
    if (pin == "")
    {
        alert("Please enter your Pin");
        frm.pin.focus();
        return false;
    }
    if (genpin.length > 13) {
        var subgenpen = genpin.substr(11);
        if (subgenpen == pin) {
            //alert("good to go" + frm.email.value + " " + pin + " " + genpin.length);
            //submit to backend service where we do addtional check's and processes
            document.registerForm.submit();
        } else {
            alert("Pin does't match, Try again");
        }
    }
}

function ValidateEmailFormat(inputText)
{
    var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    if (inputText.match(mailformat))
    {
        return true;
    } else
    {
        return false;
    }
}
            
                        

You can include the below style in your header tag's Or externalize it to a css file. Basically the card class toggles two images in the same position on a mouseEnter() event.

Once we get the email and password in the backend we sending the user an email with a Unique 128 bit encrypted id and asking them to activate their account. Until the user activates the account by clicking the link the backend provides to them via email,The account will be in a non-valid state. We keep the user details but the database table status for the user will be non-valid. Once the user clicks by activating the link we update the user status in the database to valid user and rout the user to welcome page. We store the User Object which contains all the user information about the user and put the Object in session.

This article was primarily written to show how to implement a random recaptcha using JavaScript in a cool alternative way, we did not talk or explain the backend as far as what did does using the email and password provided by the user. Backend goes through various steps to ensure we have a valid user in our system. I will provide the link to the entire backend source shortly, Or you can email direct, Please see contact page.

Be the first to comment

---

Your Comment

HTML tags allowed Render HTML   No   Yes     
Notify me by email of new comments

Email

Your PIN

 Comment