Form validation using Javascript

By: David Flanagan in Javascript Tutorials on 2008-08-31

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>

Previous
<< window.frames[i] in Javascript

Next
Password protect a web page using Javascript >>