Article | Date posted : 12 January, 2014 | Updated on : 23 February, 2014

Building a mobile checkout, validating email address (Part 3 of 8)

Sponsored Links

Today I will explain to you how to quickly process the email input field validation process using jQuery. We use jQuery instead of PHP validation as it is much quicker.

Other articles related to building a mobile checkout.

Validating Email Addresses

Validating emails is an important step of your checkout. The email is the part where we eventually will send a copy of their invoice to. Unfortunately verifying emails via jQuery is not foolproof but it is damn close to accuracy.

The code that we will be using is a regular expression, if you would like to view which types of emails are validated than follow this link to jQuery validation email addresses.

We will first create an input field, with the id element “email”, this so that we can collect information inside jQuery targeting the id element.

email validation jquery with warning

email validation jquery with warning

We now will add a function, so that we can call the email verification action when somebody clicks on continue or when the visitor exits the field on to the next one. I would highly recommend validating on both actions so that the visitor can instantly see that there is an error. Rather than waiting upon clicking the continue button.

We will now write the jQuery function to validate the email

Explaining each part of the function

The function first collects the value from the input field

We than set the pattern for the email address to check against.

Create an if else statement and here you can add your own custom error method or apply a red border around the input field as I have done.

As you can see I have added a css rule when there is an error. It’s a simple css border that is attached to the input field. To visually add a border to the input field I first check how big the window is, I do this so that I can add a thin border to small screens like Smart Phones and a thick border if it’s a bigger screen such as Tablets.

We now set a global variable for the error, so that we can collect this when we click on the continue button.

Calling the function when a visitor taps out of the input, meaning when the person has entered something and then taps away from the input field. We do this be detecting on blur function. Once we have detected that somebody is clicking away from the input field we want to call for the email validation, which is done via “emailCheck();“. I have added a reset function. This is done so that each time you exit the email input field after you have entered it, it will clear the border around the input field.

Creating the reset function, we will grab the email id that we have added in the reset function reset(“email”); 

Now that we have sorted out all our functions, it is time to set up the on click event.

On Click function

We first add our button

 Explaining all the steps

We first add some visual changes to the button we just clicked on, and remove the continue class so that it can not be clicked on while it’s processing its script.

We than reset the styling and validate the email

Log all errors, if an error is seen we simply increment the error variable, and not pass the form and throw out the error message or styling.

If there are no errors, we will collect the input information and pass it on to an ajax form.

And that is it, that’s all to it to validate your email on blur and on click.

Sponsored Links


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me