Javascript Form Validation within HTML5

Question

Designed these forms, with validation to prevent the form data being submitted empty and with certain fields only accepting numbers or letter.

The problem is this works when I call it by id's on each input, but since I can't have the same id names thought the page, this will cause w3 validation errors. Is there another way to do this possibly, to make it work without having any validation errors.

HTML

<form name="insertrecord" action="indexregister.php" method="post">
      UAD Username: <br/><input type="text" id="numbers" name="uadnumber" /><br/>
      First name: <br/><input type="text" id="lettersnumbers" name="firstname" /><br/>
      Surname: <br/><input type="text" id="lettersnumbers" name="surname" /><br/>
      Mobile Phone: <br/><input type="text" id="numbers" name="mphone" /><br/>
      Username: <br/><input type="text" id="lettersnumbers" name="username" /><br/>
      Password: <br/><input type="password" id="lettersnumbers" name="password" /><br/>
      *Confirm Password: <br/><input type="password" id="lettersnumbers" name="password" /><br/>
      <input type="submit" onclick="Numeric(), AlphaandNumeric()" value="Submit" />
    </form>
    <hr>
    <h2>Delete a Record from Database</h2>
    <h1>Delete Record from Database</h1>
    <p>*UAD Username record must already exist, for this to work</p>
    <p>All information linked to this UAD username, will be deleted</p>
    <form name="deleterecord" action="indexdelete.php" method="post">
      UAD Username: <br/><input type="text" id="numbers" name="uadnumber" /><br/>
      <input type="submit" onclick="Numeric()" value="Delete" />
    </form>
    <hr>
    <h2>Update a Record from Database</h2>
    <h1>Update Record from Database</h1>
    <p>*UAD Username record must already exist, for this to work</p>
    <form name="updaterecord" action="indexupdate.php" method="post">
      UAD Username: <br/><input type="text" id="numbers" name="uadnumber" /><br/><p>Type the new phone number you wish to update, linked to the selected UAD username</p>
      Mobile Phone: <br/><input type="text" id="numbers" name="mphone" /><br/>
      <input type="submit" onclick="Numeric()" value="Update" />
    </form>

JavaScript

function Numeric(){
  var numexp = /^[0-9]+$/;
  if(document.getElementById('numbers').value.match(numexp)){
    return true;
  }else{
    alert("Fields within this form must only use numbers, and not left empty");
    return false;
  }
}

function Alpha(){
  var alphaexp = /^[a-zA-Z]+$/;
  if(document.getElementById('letters').value.match(alphaexp)){
    return true;
  }else{
    alert("Fields within this form must only use letters, and not left empty");
    return false;
  }
}

function AlphaandNumeric(){
  var alphanumexp = /^[a-zA-Z0-9]+$/;
  if(document.getElementById('lettersnumbers').value.match(alphanumexp)){
    return true;
  }else{
    alert("Fields within this form must only use letters and numbers, and not left empty");
    return false;
  }
}

Answer 1

I like and upvoted both previous answers, however i'll suggest one more approach which is similar to class names. Since class names are related to styling it might be a good idea to use custom attributes dedicated to validation in order to be more accurate semantically.

For example it is possible to use a custom attribute that could be named something like data-validation and hold a value related to validations and have the logic act accordingly.

This is an example, based on your code and this concept, having a generic fashion for validation following something like a strategy pattern.

http://jsbin.com/xalonope/1/edit

js

function validate(){
  var elements = document.querySelectorAll("[data-validation]");
  for(var i=0;i<elements.length;i++){
    var validationType = elements[i].getAttribute("data-validation");
    if(validationType.indexOf("numbers")!=-1){
      validateNumeric(elements[i]);
    }
    if(validationType.indexOf("letters")!=-1){
      validateAlpha(elements[i]);
    }
    if(validationType.indexOf("lettersnumbers")!=-1){
      validateAlphaandNumeric(elements[i]);
    }
  }

}

function validateNumeric(elem){
  var numexp = /^[0-9]+$/;
  if(elem.value.match(numexp)){
    return true;
  }else{
    alert(elem.name+": Fields within this form must only use numbers, and not left empty");
    return false;
  }
}

function validateAlpha(value){
  var alphaexp = /^[a-zA-Z]+$/;
  if(elem.value.match(alphaexp)){
    return true;
  }else{
    alert(elem.name+": Fields within this form must only use letters, and not left empty");
    return false;
  }
}

function validateAlphaandNumeric(){
  var alphanumexp = /^[a-zA-Z0-9]+$/;
  if(elem.value.match(alphanumexp)){
    return true;
  }else{
    alert(elem.name+": Fields within this form must only use letters and numbers, and not left empty");
    return false;
  }
}

html

<form name="updaterecord" action="" method="post">
      UAD Username: <br/><input type="text" data-validation="numbers" name="uadnumber" /><br/><p>Type the new phone number you wish to update, linked to the selected UAD username</p>
      Mobile Phone: <br/><input type="text" data-validation="numbers" name="mphone" /><br/>
    First name: <br/><input type="text" data-validation="lettersnumbers" name="firstname" /><br/>
      Surname: <br/><input type="text" data-validation="lettersnumbers" name="surname" /><br/>
      <input type="submit" onclick="validate()" value="Update" />
    </form>

disclaimer: by no means complete just showing the idea.

Answer 2

The id attribute is required to be unique or your markup is simply invalid and document.getElementById will only return one of the elements. It is better to use classes for things that are going to appear in multiple parts of the page. Then you can use document.getElementsByClassName() and iterate over the elements in the returned NodeList object. (Note that it is not an Array but an array-like object.)

The other thing to consider is using HTML 5 input types that handle things like numbers for you automatically. You can also hook into the validate event to do additional validation yourself as well.

The final thing to keep in mind is that client side validation cannot be your only validation approach since people can turn off or edit your Javascript before trying to submit the form. Be sure you're also doing some server side validation as well.

Answer 3

Move the ids to class. Then use getElementsByClassName and iterate through each.

So,

<input type="text" id="numbers" name="uadnumber" />

becomes

<input type="text" class="numbers" id="numbers1" name="uadnumber" />

and

if(document.getElementById('numbers').value.match(numexp)){
return true;
}

becomes

var nbrs = document.getElementsByClassName('numbers');
for (var i = 0; i < nbrs.length; i++)
{
if(!nbrs[i].value.match(numexp)){
alert("Fields within this form must only use numbers, and not left empty");
return false;
}
}
return true;