SERVER-SIDE VS CLIENT-SIDE CHECKING

Just one moment before we officially dive into form checking – There is something important you need to understand, and that is, form checking has to be done on both the server and client-side.

• Client-side checking – What you are trying to do right now, checking the form with HTML and Javascript.
• Server-side checking – Form checking on the server-side (with PHP, ASP, JSP) after the form has been submitted.

The reason why this is so important is that client-side code can easily be tampered with. Those with a little more Javascript knowledge will just open up the developer’s console, edit a few lines of code, and that’s it. Goodbye and so much for your “safety checks” with Javascript.

So always ensure that more effort is spent on the server-side checks instead, where the users cannot tamper with; Client-side form validation should not be used as the safety net, but only as a means to “beautify” your forms.

VALIDATION BASICS

Quick recap, you create a form using the form tags and sandwich the Input fields inside.

  Name: 
  Email: 
  Password: 
  Tel: 

The above form will work, but the problem is, it is missing out on all forms of form validation. Once upon a time in the stone age of the Internet, HTML form checking does not exist. But today, things are a lot more convenient, and we only have to add a few form checking attributes.

So simply adding a few more attributes to the above example will turn it into a “form with validation”. Yep, even the email and telephone input fields will automatically determine if a valid value is entered.

  Name: 
  Email: 
  Password: 
  Tel: 

CUSTOM VALIDATION PATTERNS

There are times where you need to define your own checks, and we can do that by using the pattern attribute. But the problem is, you need to know some regular expressions, which is not that simple… We will go through some of the common patterns here.

EXACT MATCH

The simplest and most straightforward check, the user input must match the pattern exactly. This is especially good for checking things like “enter confirm into the text box to proceed”.

Enter "Doge" - 

MATCHING MULTIPLE VALUES

If you are expecting more than one possible entry, you can use the OR expression. Of course, you can OR as many values as you want.

Enter "Doge" or "Cate" - 

MATCHING ALPHABET CASES

We cannot expect everyone to enter “Doge” with the capital D exactly. To cater for some flexibility, we can use a pair of square brackets so it will match either the small or capital letter.

Enter "Doge" - 

So in the above example, it will match “doge” or “Doge”. In the extreme case, you can do:

Enter "Doge" - 

RESTRICTING NUMBERS AND ALPHABETS

Only 0 to 9 allowed - 

Only a to z allowed - 

MATCHING A SERIES OF NUMBERS OR ALPHABETS

Now that you know how to restrict numbers and alphabets, you can easily make it match in a series using curly brackets:

Matches (0 to 9) 3 times - 

In the above example, the pattern will match a series of 3 digits, that is 000 to 999. But if you want to match 0 to 999, you can use:

Matches (0 to 9) 1 to 3 times - 

Similarly, you can use it on alphabets:

Matches (a to z) 3 times - 

The pattern above will match aaa to zzz.

MATCHING TELEPHONE NUMBERS

Let’s say that you want to match a 9 digits phone number (XXX-XXX-XXX)

Or maybe you want to allow spaces as well (XXX XXX XXX)

MATCHING ANY CHARACTERS

You can use a period (.) to match any characters. For example, if you want to match a string that starts with T, followed by any 3 characters then end with X.

You can also use a star (*) to match zero or more times. For example, matching a string that starts with T, followed by any possible number of characters and ends with X

CUSTOM ERROR MESSAGES

By default, HTML will only give you a generic “please fill up this field properly” error message. So if you want to set the custom error messages, you can use the setCustomValidity function when the window loads.

  Name: 
  Email: 
  Password: 
  Tel: 

CUSTOM JAVASCRIPT CHECK

Now, let’s say that you want to have a consolidated popup error message box instead – We have to first prevent the default HTML form validation from firing up when we submit the form, then define our Javascript:

• Attach a “novalidate” attribute to the form.
• Fire a Javascript when the form is submitted – I.E.onsubmit="return check()"

  Name: 
  Email: 
  Password: 
  Tel: 

This is how we manually write our own Javascript validation, and there are a few things that you should know:

• The willValidate property returns a true when the field will be validated on submit – We can use this omit the fields that do not need to be validated.
• Use the checkValidity function to check the field – It returns a true/false value.

THE MICRO CHECKS

So what has exactly gone wrong, and what are you expecting the user to input? Well, if you want, you can use the validity property and define errors down to that micro level.

An example –

var field = field = document.getElementById("some_field");
if (!field.checkValidity()) {
  if (validity.valueMissing) { error += "Please enter a value"; }
  if (validity.tooLong) { error += "A maximum of 12 characters is allowed"; }
}

TRY IT OUT

Now it’s time to hand the controls back to you – Feel free to copy any of the above code into your own project or play with it on my jsFiddle.