Question

What would a JavaScript script be that, on submit, gets all form elements with class="required" and if they’re empty, displays an alert box, “you must fill out so-and-so”?

I was thinking of an if–else, and in the if section we would get a while that loops through all the class=required elements, and the else would submit the form.

Answer 1

It is fairly easy to loop over the elements of a form and check that those with a certain class have a value that meets certain criteria:

<form name="f0" onsubmit="return validate(this);">
  <input name="inp0" class="required" >
  <input name="inp2" class="required" >
  <input type="submit">
</form>

<script type="text/javascript">

var validate = (function() {
  var reClass = /(^|\s)required(\s|$)/;  // Field is required
  var reValue = /^\s*$/;                 // Match all whitespace

  return function (form) {
    var elements = form.elements;
    var el;

    for (var i=0, iLen=elements.length; i<iLen; i++) {
      el = elements[i];

      if (reClass.test(el.className) && reValue.test(el.value)) {
        // Required field has no value or only whitespace
        // Advise user to fix
        alert('please fix ' + el.name);
        return false;
      }
    }
  }
}());

</script>

The above is just an example to show the strategy.

Using an alert is less than optimal, usually an area is set aside adjacent to the required fields so that error messages can be written there to direct the user’s attention to the invalid fields. You can also set all the error messages in one go, then return, rather than one at a time.

Edit—updating multiple errors

Have an element adjacent to each control to be validated with an id like the element’s, so if an input is called firstName, the error element might have an id of firstName-err. When an error is found, it’s easy to get the related element and put a message in it.

To do all at once, use a flag to remember if there are any errors, say “isValid” that is set to true by default. If you find any errors, set it to false. Then return it at the end.

Using the example above, the HTML might look like:

  <input name="firstName" class="required" >
  <span id="firstName-err" class="errMsg"></span>

Errors for firstName will be written to firstName-err.

In the script, if an error is found:

// At the top
var isValid = true;
var errEl;
... 

  // When entering the for loop
  el = elements[i];
  errEl = document.getElementById(el.name + '-err');

    // when error found
    isValid = false;
    if (errEl) errEl.innerHTML = '... error message ...';

    // else if error not found
    // remove message whether there is one or not
    if (errEl) errEl.innerHTML = '';

 ...

// At the end
return isValid;

You can also use a popup to show the errors, however that is really annoying and the users must dismiss the popup to fix the errors. Much better to just write next to each one what is wrong and let the user fix things in their own time.