Validating Common Form Input - Part 3

Validating names

Single names are not much different from usernames except you can be certain that they mostly contain letters. To allow for a sinlge name restricting the length to 4 to 32

 1 function validate(form) {
 2   // Regular expression for a single name
 3   var rgx = /^\s*[a-z]{4,32}\s*$/i;
 4   if(!rgx.test(form.elements.name.value))
 5     return false;
 6   return true;
 7 }
function validate(form) {
  // Regular expression for a single name
  var rgx = /^\s*[a-z]{4,32}\s*$/i;
  if(!rgx.test(form.elements.name.value))
    return false;
  return true;
}

To allow for characters specific to your nationality you may need to look up the unicode for the characters. It depends on which character set you use for encoding. The most common character sets are ISO-8859-1 and UTF-8.

To see your character set open you HTML file and look in the header for a line like

 1 <meta http-equiv=\"Content-Type\" content=\"text/html;charset=ISO-8859-1\" />
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=ISO-8859-1\" />

If you see no such line the character set is sent as a HTTP header. If you have Firebug or a similar tool you should be able to see what character set was sent to the browser

Here the character set is set to ISO-8859-1 and it that case we will have to use the unicode values.

To accomodate for the special danish characters æ, ø and å we find the ASCII values which are 230, 248 and 314. To use these values in a regex we need them as hexidecimal which would be 0xE6, 0xF8 and 0xE5.

To allow for danish characters in the name we write

 1 function validate(form) {
 2   // Regular expression for a single name
 3   var rgx = /^\s*[a-z\xe6\xf8\xe5]{4,32}\s*$/i;
 4   if(!rgx.test(form.elements.name.value))
 5     return false;
 6   return true;
 7 }
function validate(form) {
  // Regular expression for a single name
  var rgx = /^\s*[a-z\xe6\xf8\xe5]{4,32}\s*$/i;
  if(!rgx.test(form.elements.name.value))
    return false;
  return true;
}

To get the specific unicode values you need consult a reference like http://www.asciitable.com/.

A better way is to encode your HTML (and JS) using the UTF-8 character set. With UTF-8 you can just enter any character into the regex without translating them first. So the same regex using UTF-8 can be written as

 1 function validate(form) {
 2   // Regular expression for a single name
 3   var rgx = /^\s*[a-zæøå]{4,32}\s*$/i;
 4   if(!rgx.test(form.elements.name.value))
 5     return false;
 6   return true;
 7 }
function validate(form) {
  // Regular expression for a single name
  var rgx = /^\s*[a-zæøå]{4,32}\s*$/i;
  if(!rgx.test(form.elements.name.value))
    return false;
  return true;
}

A note for PHP users. PHP 5.x does not natively use UTF-8 so you will have to use the utf8_encode function when outputting data. This implies that if your database is storing text as UTF-8 you will have to convert twice - once while reading the text into PHP using utf8_decode and again when outputting using utf8_encode.

Back on track. People mostly have more than one name so we should make sure spaces are also allowed.

 1 function validate(form) {
 2   // Regular expression for a multiple names
 3   var rgx = /^\s*[a-z\s]{4,32}\s*$/i;
 4   if(!rgx.test(form.elements.name.value))
 5     return false;
 6   return true;
 7 }
function validate(form) {
  // Regular expression for a multiple names
  var rgx = /^\s*[a-z\s]{4,32}\s*$/i;
  if(!rgx.test(form.elements.name.value))
    return false;
  return true;
}

This can be done by adding \s to the regex. But now the regex will also match 4 to 32 spaces - not what we intended. What we want is multiple ranges of letters separated by spaces. This we do with

 1 function validate(form) {
 2   // Regular expression for a multiple names
 3   var rgx = /^\s*[a-z]{4,}(\s+[a-z]{4,})*\s*$/i;
 4   if(!rgx.test(form.elements.name.value))
 5     return false;
 6   return true;
 7 }
function validate(form) {
  // Regular expression for a multiple names
  var rgx = /^\s*[a-z]{4,}(\s+[a-z]{4,})*\s*$/i;
  if(!rgx.test(form.elements.name.value))
    return false;
  return true;
}

But now we can no longer count the maximum number of characters with the regex. To check the length we simply do

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var elm = form.elements;
 4   // Regular expression for a multiple names
 5   var rgx = /^\s*[a-z]{4,}(\s+[a-z]{4,})*\s*$/i;
 6   if(elm.name.value.length < 33 && !rgx.test(elm.name.value))
 7     return false;
 8   return true;
 9 }
function validate(form) {
  // Shortcut to save writing
  var elm = form.elements;
  // Regular expression for a multiple names
  var rgx = /^\s*[a-z]{4,}(\s+[a-z]{4,})*\s*$/i;
  if(elm.name.value.length < 33 && !rgx.test(elm.name.value))
    return false;
  return true;
}

Finally it is common for people to abbrievate middle names and many people have names with dashes. So we should also allow for . and -

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var elm = form.elements;
 4   // Regular expression for a multiple names
 5   var rgx = /^\s*[a-z]+([a-z]*\.|\s*\-\s*[a-z]+)?(\s+[a-z]+(\.|\s*\-\s*[a-z]+)?)*\s*$/i;
 6   if(elm.name.value.length < 33 && !rgx.test(elm.name.value))
 7     return false;
 8   return true;
 9 }
function validate(form) {
  // Shortcut to save writing
  var elm = form.elements;
  // Regular expression for a multiple names
  var rgx = /^\s*[a-z]+([a-z]*\.|\s*\-\s*[a-z]+)?(\s+[a-z]+(\.|\s*\-\s*[a-z]+)?)*\s*$/i;
  if(elm.name.value.length < 33 && !rgx.test(elm.name.value))
    return false;
  return true;
}

As abbrievated middlenames will likely be a single character followed by a dot we remove the restriction that each name must be at least 4 letters. This final example will validate names like Martin, Martin L. King, M. Luther-King, Martin Luther-King etc.

Next up - checking phione numbers.

Leave a comment