Our Vision

Your Business Revitalized

We are a Denver, Colorado based consulting firm specializing in helping you define your business goals and driving sales through professional media. We offer high quality branding, web design and development, mobile app and game development, self-publishing assistance for authors, email marketing and strategic business consultation.

Get Started!
Mike Lazear
Mike Lazear, Founder & CEO

A Message from the Founder

Welcome to the 515 Media company website! We look forward to helping you create your new business vision. I’ve had the joy of helping so many clients embark on a new professional journey and their businesses become a huge success. We would love to be a part of your success as well. So glad to have you with us!

Mike's Signature

Branding

Work with our team to define your brand, message and image. Not sure where to begin? Looking to stand out from competitors and leave a lasting impression with your clients? We can help!

Stellar Media

If you are looking for quality web design, development, print, custom video and front-end user-interface and application design, you have come to the right place.

Your Vision

515 Media specializes in helping you define your business goals. Schedule a free consultation today and we will meet with you to help you crystalize your new process!

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.

Read More Posts