Programming Tutorials

The <form> tag supports an onsubmit event handler, which is triggered when the user tries to submit a form. You can use this event handler to perform validation: checking that all required fields have been filled in, for example. If the onsubmit handler returns false, the form is not submitted. For example:

<form name="address" onsubmit="checkAddress()">

<!-- form elements go here -->

</form>

<script>

// A simple form validation function

function checkAddress() {

  var f = document.address; // The form to check

  // Loop through all elements

  for(var i = 0; i < f.elements.length; i++) {

    // Ignore all but text input elements

    if (f.elements[i].type != "text") continue;

    // Get the user's entry

    var text = f.elements[i].value;

    // If it is not filled in, alert the user

    if (text == null || text.length == 0) {

      alert("Please fill in all form fields.");

      return false;

    }

  }

}

</script>