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;
  }
}

IDs should be always unique. You should use classes

user753676
– user753676

2014-03-15 15:27:49 +00:00
Commented Mar 15, 2014 at 15:27 — user753676
– user753676, Commented Mar 15, 2014 at 15:27

attila · Accepted Answer · 2014-03-15 15:27:22Z

2

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;

answered Mar 15, 2014 at 15:27

attila

2,2291 gold badge13 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

magi4000 Over a year ago

quick questions, you code works but the alert after showing, allows the code go though even though the validation is in place, did I place it wrong. /EXMAPLE/ function deleteNumeric(){ var numexp = /^[0-9]+$/; var dnbrs = document.getElementsByClassName('delenumbers'); for (var o = 0; o < dnbrs.length; o++) { if(!dnbrs[o].value.match(numexp)){ alert("Fields within Delete Record must only use numbers, and not left empty"); return false; } } return true; }

attila Over a year ago

You need to return the true/false to the onclick function, like this: onclick="return Numeric()". Also, if you are doing multiple function calls, you can do this: onclick="return (Numeric() && AlphaandNumeric()".

magi4000 Over a year ago

Thank you, this help me a lot and fixed everything ^_^

jxpx777 · Accepted Answer · 2014-03-15 15:28:48Z

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.

answered Mar 15, 2014 at 15:28

jxpx777

3,6414 gold badges30 silver badges43 bronze badges

3 Comments

magi4000 Over a year ago

I tried you method and it does not work /EXAMPLE/ From document.getElementById('numbers') = document.getElementsByClassName('numbers') and Password: <br/><input type="password" id="lettersnumbers" name="password" /> = Password: <br/><input type="password" class="lettersnumbers" name="password" />

jxpx777 Over a year ago

Can you post revised markup? Simply changing to getElementsByClassName isn't going to help unless you actually have class names attached to the elements…

jxpx777 Over a year ago

You might also consider the HTML5 pattern attribute: html5pattern.com Just set the pattern attribute to the regex to validate your fields and let HTML5 handle it for you.

melc · Accepted Answer · 2014-03-15 15:53:34Z

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.

Collectives™ on Stack Overflow

Javascript Form Validation within HTML5

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related