Form Validation with Dynamic Field Names

Question

I have a form but all fields need to be filled in before the form will submit. I have experimented with adding HTML5 required = "required" which works fine on Chrome but not on IE.

Form field names are dynamic so I cannot reference them directly so needing some JavaScript code to loop through the inputs in the form then if the value is blank to focus the field with an alert and return false on the form submit.

I have started putting something together but my javascript is terrible ! Hoping yours is much better !

<script type="text/javascript">
function validatelink2(){
for (var i = 0; i < document.forms['form1bxxx'].elements.length; i++) {
    var e = document.forms['form1bxxx'].elements[i];
    alert(e);
}
</script>



<form id="form1bxxx" name="form1bxxx" method="post" action="submitform.asp" onSubmit="return validateForm2(this)">

    <input name="veh<%=id%>" value="" type="text" id="veh<%=id%>" size="7" required="required" >

    <input name="date<%=id%>" type="text" id="date<%=id%>" size="10" onFocus="showCalendar('',this,this,'','holder1',0,30,1)">

    <input name="mile<%=id%>" type="text" id="mile<%=id%>" size="6">

    <input type="submit" name="button999" id="button999" value="Continue &gt;&gt;&gt;" onclick="return validatelink2(this);" />

Edit....

Updated Javascipt to

<script type="text/javascript">
function validatelink2(){
//Make sure required items are filled in
alert("hello");
  var x=document.getElementsByClassName('required');
  for(var i = 0; i <x.length; i++){
  alert("checking");
    if (x[i].value == null || x[i].value == "")
    {
      x[i].focus();
      alert("All Required Items are not completed.");
      return false;
    }
    }
    }
</script>

and I've set class required to have a background colour of yellow so I can see all the fields clearly with that class.

 <input name="veh<%=id%>" value="" type="text" id="veh<%=id%>" size="7" required="required" class="required" >

When I submit the form the hello alert comes up then form submits despite blank values.

so you need to check whether all inputs are filled? – Jeffin Aug 24 '17 at 13:23 — Jeffin, Aug 24 '17 at 13:23
yes exactly, updated question on recent progress. – Emma Aug 24 '17 at 13:47 — Emma, Aug 24 '17 at 13:47

score 1 · Answer 1 · answered Aug 24 '17 at 13:26

1

You can use a class and use that to loop through the items and make sure they have a value. This also allows for styling to show the field as required:

function submitRegClicked(){
//Make sure required items are filled in
  var x=document.getElementsByClassName('required');
  for(var i = 0; i <x.length; i++){
    if (x[i].value == null || x[i].value == "")
    {
      x[i].focus();
      alert("All Required Items are not completed.");
      return false;

} }

The message is ugly, but this should get you the idea. Any item with a class of "required" will be checked.

answered Aug 24 '17 at 13:26

Karl_S

3,364
2
19
33

I don't get the alert("All Required Items are not completed.") despite blank fields. – Emma Aug 25 '17 at 08:05
Works in Chrome. In IE I am get the error Object doesn't support property or method 'getElementsByClassName' – Emma Aug 25 '17 at 08:15
Is this an older version of IE? When I do a search for [getelementsbyclassname internet explorer](https://www.google.com/search?q=getelementsbyclassname+internet+explorer&oq=getElementsByClassName+inter&gs_l=psy-ab.3.0.0j0i22i30k1l3.935.3221.0.6518.6.6.0.0.0.0.196.926.0j5.5.0....0...1.1.64.psy-ab..1.5.926.eWCpnin0Aik) I see many items which are older. – Karl_S Aug 25 '17 at 14:31
Internet explorer 11 – Emma Aug 28 '17 at 11:20

score 0 · Answer 2 · answered Aug 24 '17 at 20:05

0

It's submitting because you aren't telling it to not submit.

You need to tell the submit event not to submit. You do this with preventDefault().

Example:

function validatelink2(event){
  var x=document.getElementsByClassName('required');
  for(var i = 0; i <x.length; i++){
    alert("checking");
    if (x[i].value == null || x[i].value == ""){
      x[i].focus();
      alert("All Required Items are not completed.");
      event.preventDefault(); // form won't submit
      return false;
    }
  }

}

var the_form = document.getElementById("form1bxxx")
the_form.addEventListener("submit", validatelink2)

(In general, you should avoid using attributes like onsubmit in your HTML and instead put the logic into your JavaScript.)

See also: How to Prevent Form From Being Submitted

answered Aug 24 '17 at 20:05

Scribblemacher

1,518
1
16
31

Made those changes, the form still submits and I don't get the alert ("All Required Items are not completed.") despite fields being blank. – Emma Aug 25 '17 at 08:04
Works in Chrome. In IE I am get the error Object doesn't support property or method 'getElementsByClassName' – Emma Aug 25 '17 at 08:15
Are you on an old version of IE? `document.getElementsByClassName` should be supported by IE9+. (The form is still going to submit if your script fails to get elements because your `for` loop will never execute and this `preventDefault()` never gets called.) – Scribblemacher Aug 25 '17 at 12:16
@Emma it would help if you made a jsfiddle for this to see your exact code. – Scribblemacher Aug 25 '17 at 12:17
Using internet explorer 11 – Emma Aug 25 '17 at 16:16
– Emma Aug 29 '17 at 08:43

Form Validation with Dynamic Field Names

2 Answers2