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?

Well, here’s another approach you can try.

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:

jQuery(document).ready(function()
{
    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)
        {
            event.preventDefault();
            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.

Revolutionize Your Conversion Numbers with Our New Business Plans

After an exciting year of planning and perfecting our long-standing managed website hosting plans, we are proud to announce the launch our new Business Website Management Plans for our clients! These services are available for all 515 Media clients effective immediately.

These exciting new plans also include the brand new Platinum and Diamond plans which are a must for business owners who are serious about understanding their traffic patterns and supercharging their conversion rates. These new plans include custom Google analytics interpretation, advanced tracking and will give business owners a leg-up on knowing what content will help increase sales.

How Will These Plans Help My Business?

In addition to giving your website an unprecedented level of security, speed and stability, the higher-level plans are directly designed to help you increase sales. These are not just hosting plans for your sites any longer!

These plans work by utilizing Google Analytics to show how visitors are reaching your website, their activity patterns and how long they are spending engaging with your website content. The information obtained in these analytics reports can be directly customized to help you build new calls to action and sales funnels. This information is invaluable in helping you customize your content that will bring in traffic targeted to convert sales. In other words, no more random visitors to your site who click on one link and then leave your site!

Great! Can I Still Keep My Current Hosting Plan?

You can keep the current plan you are on if it is working for you. The current plans still cover any services you have already been receiving, and we plan to support these plans for at least another year. If you have pre-paid for an annual plan you may upgrade at any time (you’ll get a discount from what you’ve already paid) or you may stay on your current plan.

Another advantage of being a 515 Media client is that our older plans aren’t going anywhere any time soon for our long-time clients.

How Do I Sign Up for a New Plan?

You may sign up directly at the main Business Website Management Plans or Contact Us here. Either way, we will get you set up right away, and begin helping you really take a deep dive into driving conversions!