如何验证简单的Web表单

Question

Im working on a small form and using js to validate if the fields are empty or not. I have a span class next to the name field "name" "email ".

For the "name" field, i have a span class called "error" .

For the "email" field, i have another span class called "error2".

what can i do to only use one class to display the "error message" , because of course i will have more field and I don't want to keep adding more classes. error3, error4

HTML:

 <form action="#i" name="myForm" onsubmit="return(validate());">
  Name: <span id="error"></span><br>
  <input type="text" name="Name" /><br><br> 

  EMail: <span id="error2"></span><br>
  <input type="text" name="EMail" /><br> <br> 

  <input type="submit" value="Submit" /> <br>
  </form>

JS:

  function validate()
  {
     var t = 0;      
     if( document.myForm.Name.value == "" )
     {
        document.getElementById('error').innerHTML = "<br>Empty";  
        t = 1;
     }

     if( document.myForm.EMail.value == "" )
     { 
        document.getElementById('error2').innerHTML = "<br>Empty";  
        t = 1;
     }

     if(t == 1)
     {
        return false;
     }
     else
        return true;
  } 

Answer 1

Instead of giving the spans the attribute of Id, use classes instead. So for example, you can define ALL your spans as follows:

 <span class="error"> ... </span>

Then, in your validate function, you can obtain these spans through:

document.getElementsByClassName('error');

Keep in mind though, this returns an array, which would actually be perfect for your function. This way, you can write a basic for-loop to go through each span and make sure each field is filled in correctly.