Using Javascript to Enhance or Override Form Validation

Using Javascript to Enhance or Override Form Validation

Have you ever needed to alter the way a form validates user input, but couldn’t do so using PHP or HTML5’s (admittedly primitive) “required” attributes? Javascript may be your answer.

Normally, you would want to utilize PHP or any server-side scripting language to check the state of a form before allowing users to submit their input for further processing. However, in situations where you may not have direct access to a website’s filesystem, it is possible to leverage JavaScript as a secondary means of form validation.

We must stress that, because JavaScript is processed on the end user’s machine, you should never rely on it to validate sensitive information – JavaScript can always be disabled or otherwise tampered with, so the strategies outlined in this article are only truly useful where extra form validation would be convenient, or nice to have, but not mission-critical.

So, how do we do it?

The key here is a JavaScript function called event.preventDefault(), which will effectively cancel an HTML action before it can begin.

In our case, we wanted to step through a registration form and verify that our user had selected at least one checkbox element from a number of independent categories. If our JavaScript-based validation failed, we would simply cancel the user’s submission request.

Here’s what we came up with:

    document.getElementById("form-submit").addEventListener("click", function(event)
        var found_checked = false;
        // Loop through checkboxes and see if any have been selected
        jQuery(".class-dates input").each(function()
            if (jQuery(this).prop("checked"))
                found_checked = true;
                return (false);
        // Stop form submission if necessary
        if (!found_checked)
            alert("You must select at least one class.");

Let’s take a closer look at a few lines of code and explain how they work:

  • Line 3 – This will run our code when the user clicks on a webpage button with the id “form-submit”
  • Line 5 – We declare a variable (“found_checked”) that is used later in the snippet to see whether any checkbox was selected
  • Line 7 – We loop through all of the input fields (checkboxes) that are within a container called “.class-dates”
  • Lines 9-13 – If a checkbox is selected, we set our variable to true and break out of the loop
  • Lines 16-20 – If our variable is still set to false, that means no checkbox was selected, so we should abort the submission request with event.preventDefault()

Pretty simple overall, and our client was very happy with the results!

Of course, you are welcome to adapt the code to your needs. JavaScript is a powerful language – suitable for even the most complicated form validation setups – and as long as you are mindful of security implications, the sky’s the limit.

Browser Compatibility

The event.preventDefault() method is compatible with all modern browsers, however Internet Explorer 8 and below are not supported.

It is possible to use a variable called event.returnValue if you need to ensure proper functioning in older browsers, though it should be noted that our example code relies on the jQuery library, which is also incompatible with IE8. Luckily, this version of Internet Explorer only accounts for 0.4% of the worldwide browser market share, so compatibility is not essential for most projects.

Questions? We’re here to help.

If you have any questions or would like to enlist our help in writing custom scripts for your website, feel free to contact us here. Together, we’ll bring your ideas to life.

Leave a Reply

Your email address will not be published. Required fields are marked *