Validating user input on forms

Technical

When users fill in forms on your website, you want to ensure that the data they’re submitting it accurate and relevant. You want to guide the user to send the correct information to you.

The best way to achieve this is by validating the data that the user is submitting through your forms. From a user experience, the best means of validation is front-end (in the browser), which involves validating the data as the user hits submit or tabs away from the field, alerting the user instantly that they need to revisit what they have entered before they submit the form.

Coupled with this front-end validation, it’s always good to validate on the back-end (server side) before we handle the form submission, this is because some users will have javascript turned off, which front-end validation techniques rely on and it also helps to check the data again in case it wasn't validated properly on the front-end for another reason.

Front-end form validation

Jquery validate

This is a plugin we have used extensively on most of our client’s websites who have forms that submits data to somewhere. This plugin allows us to deliver friendly reminders to a user, eg. if a field is required, if the email address they’ve entered doesn’t look like a valid email, etc. The user will get a friendly error message underneath the field and a focus state on the offending field to inform them that something is wrong with the data they have entered and they should correct it before submitting the form.

This plugin allows us to define our own methods for validating data so if you have a specific requirement about the format of data entered into one of your fields, we can validate this too as well as customising any of the error messages generated by the plugin. The code below shows us validating our form with the id “form” and setting 2 rules on the name field. We first make the field required, then set a minimum length of 3 characters on the input. We finish by customising the error messages displayed to the user for those fields which are failing validation.

$("#form").validate({
    rules: {
        name: {
            required: true,
            minlength: 3
        }
    },
    messages: {
        name: {
            required: "Please enter your name",
            minlength: "Your name must be at least 3 characters long" 
        }
    }
});

HTML5

With the introduction of HTML5 came another method of basic form validation that seems to work rather well alongside jQuery validate. HTML5 allows us to define required fields, max/min lengths and adds a few new field types such as email, number and url plus a few extra things that allow the browser to validate the users form inputs before they are submitted. Some examples of HTML5 validation can be seen below.

<input type="url" name="website">
<input type="text" name="name" required>
<input type="email" name="email" required>
<input type="number" name="age" min="10" max="99">

The benefit of adding HTML5 validation is that it’s validated by the browser on the fly, similar to a javascript implementation such as jQuery validate, only it’s implementation is determined purely by the support of the browser being used by the user. That field type is then validated the same way, consistently, accross all websites that user visits, becoming familiar to the user over time.

Back-end form validation

Laravel form validation

Here at The Escape, we use Laravel as our PHP framework of choice, which has a very helpful Validation Class already built in to allow us to process user input on the server side once the data has passed the front-end validation described above. By using the Validator class, we can define a number of specifications about the format of the data submitted in certain fields to check that the user has entered the correct information. If the validation of the data fails, we simply return the user to the form, with the data still pre-filled and a flash message to say why there submission was rejected. An example implementation of the Laravel Validation class can be seen below.

$locations = ['uk','us','europe'];

$rules = [
    'name' => 'required|min:1',
    'email' => 'required|email',
    'newsletter' => ['regex:/^(\bYes\b|\bNo\b)$/i'],
    'location' => "in:{$locations}",
];

$validator = Validator::make($input, $rules);

The above example defines some fairly obvious validation rules such as 'required' and 'min' (minimum length), but we also defined a regex validation rule. Regex stands for 'regular expression'. This basically allows us to check that the newsletter value submitted by the user matches a certain pattern defined by our regular expression, in this case, it’s looking to see if it starts with either a Yes or No. We also have an 'in' rule, which enables us to pass through a list of accepted locations to check that the user is submitting a valid location.

Summary

With the implementation of both front-end and back-end form validation, you can increase the quality of the data captured from your users. Ee use jQuery validate/HTML5 on the front-end and the laravel validator class on the back-end and have had very positive results for our clients. It’s important to bear in mind that this list is not exhaustive, there are many other ways of ensuring the quality of your form submissions on your websites, but these are the ones that we consistently implement and work well for us and our clients.

Fancy a bit more technical? Try these...

A user-friendly alternative to CAPTCHA

Back to more