HTML5 Form Validation

When HTML5 was released 2 years ago it came with a load of new features that will help with front end development and some awesome new APIs that make development so much easier. In this tutorial we're going to look into just one of these features which is HTML5 Form Validation.

To see how we can use these features lets look into what the original problem was and why HTML form validation was needed. Before HTML5 validation all your forms on your website will need 2 types of validation client-side and server-side. You will always need server-side validation but if you want to improve the user experience on your site you would also need to develop client-side validation.

For example the server-side validation would be in PHP and then you would need to write almost all the same validation logic in JavaScript on the client-side of your site, therefore having to write the exact same thing twice. You will always need server-side validation there's no getting around that but HTML5 enables you to do the client-side validation with very minimal coding.

Required Form Field

The required form field is probably the most common form validation you will need to do, this is to ensure that the form can not be submitted until this field has a value attached to it.

<label for="search">Search</label>
<input type="text" placeholder="Search keywords" name="search" id="search" />

To validate this field in PHP you just need to check that the $_POST['search'] variable is not empty.

function validate_form()
{
    if($_POST['search'] == '')
    {
        return false;
    }

    return true;
}

But you would also need to do validation on the client-side with JavaScript.

function validate_form() {
    var searchField = document.forms["search_form"]["search"].value;
    if (searchField == null || searchField == "") 
    {
        alert("Search can not be empty");
        return false;
    }
}

In HTML5 you don't need to add this Javascript code all you have to do is add a new required attribute to the textbox.

<label for="search">Search</label>
<input type="text" placeholder="Search keywords" name="search" id="search" required />

Now if the search field is empty and the user submits the form the form will not post and will display a message to user that the field is required.

Along with this required attribute there are new field types which automatically come with client-side validation, for example if you want a number you can use a new number input type, if you want an email you can use a email input type.

Number Validation

To validate number fields you can use a input type of number which makes sure you have to enter a number.

Below is an example of having a number field which is restricted to be a number between 1 and 4

<label for="number">Number</label>
<input type="number" min="1" max="4" />

URL Validation

If you want to make sure the user only enters a URL you can use the url input type. On form submission the browser will check that this field is a URL.

<label for="url">URL</label>
<input type="url" />

Email Validation

To do client side validation on the email address of the user you can use the email input type. On form submission the browser will check that this field is an email address.

<label for="email">Email</label>
<input type="email" />

Regex Pattern Validation

If you want to have a normal text box but do some form of client-side validation for a certain text regex patterns. You can use the pattern attribute which will ensure the data entered into the field matches this field type.

The below example uses RegEx to ensure that only letters are entered into the textbox.

<label for="letter">Letters Only</label>
<input type="letter" pattern="[a-zA-Z]+" />

Or if you want to make sure the user enters a colour HEX value you can use RegEx again to make sure this pattern is entered.

<label for="hex">HEX Only</label>
<input type="hex" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" />

Remove HTML5 Validation

You can even choose to turn off HTML5 validation altogether by adding an attribute of novalidate on the form tag.

<form method="post" action="" novalidate>

</form>

HTML5 Form Field Demo

See the Pen ONbwvp by Paul (@paulund) on CodePen.

HTML5 Form Generator

A tool we have on Coveloping if the HTML5 form generator that allows you to create a form without writing any code and the generator will create all the code you need to embed the form on your website.

Included on the generator is all the new HTML5 form field types

  • color - popup colour selection
  • date - popup date selection
  • datetime - select date and time with the timezone
  • datetime-local - select date and time without the timezone
  • email - requires input to be a valid email address
  • month - select the month and year
  • number - requires numerical value, min and max values can also be defined
  • range - displayed as a slider with mix and max values defined
  • search - input field that behaves like a search
  • tel - valid telephone number required
  • time - special time formatting
  • url - requires valid url (with http prepended)
  • week - select week and year

If you're using the form generator to create a contact form it will even generate the PHP code you need to send you an email with the input from the contact form. Try it out with the link below.

HTML Form Generator

Coveloping Membership

Access to a range of developer tools, get your first month free

Start Your Free Trial

Don't miss out!

Sign up to our newsletter for the latest news from Coveloping

Leave a Reply

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

Code Copied!