Validating standard input

10-May-2016 12:55 by 5 Comments

Validating standard input - thirty something dating a tweenty something

Before you ask, and someone always does, these examples will currently work in the following browsers: Safari 5, Chrome 6, Opera 9, Firefox 4 Beta and the i Phone/i Pad.

Sure there have been all kinds of whacky plug-ins over the years aimed at achieving this, but never a single standard that we could work towards.

As soon as a single character has been entered this changes to a green marker to indicate that the input is 'valid'.

Using CSS you can place markers inside or alongside the input box, or simply use background colours and borders as some browsers do by default. On the i Phone/i Pad the different input types are associated with different keyboards, making it easier for people to complete your online forms.

For a more detailed introduction to HTML5 form validation you can find some great articles linked under References below.

In this article we intend to present only a number of simple examples to get you started, covering the basic form elements.

While it would be great to see something like this in every browser, for now you probably need to stick with the ubiquitous Java Script plugins. Arjen, You're correct: and it's not just the plus sign ( ), although I have to admit, I've never seen that used in an email address before.

While the code we're using is slightly more complicated, this should get you started: Some of the articles below, particularly the first two, provide other style/scripting options and solutions for supporting older browsers. Wikipedia has a list of potentially valid email formats here: en.wikipedia.org/wiki/Email_address#Valid_email_addresses Most browsers accept [email protected] as valid for email input as it can be technically correct in some situations - on an intranet for example. How do you only show the fields as 'invalid' after the user leaves (blurs? It's ugly to have ready icons displayed when the page loads.

In other web browsers they can be used in combination with the .

Obviously neither example is very limiting, but it will prevent people from entering completely wrong values, such as phone number, strings with multiple '@'s or spaces.

The simplest change you can make to your forms is to mark a text input field as 'required': This informs the (HTML5-aware) web browser that the field is to be considered mandatory.

Different browsers may mark the input box in some way (Firefox 4 Beta adds a red box-shadow by default), display a warning (Opera) or even prevent the form from being submitted if this field has no value.

We have a separate article with details on validating passwords using HTML5, including Java Script code for customising the browser generated alert messages. You just need to pick one and then remove the portion that detects the protocol (xxx://).