Red Border Still Appears On Inputs After Resetting An Html 5 Form Firefox

I have an HTML 5 form! Great, I'm excited! I decide to submit the form using an xmlHttpRequest, well I'm using jQuery so $.post(...). It works, awesome. I enter some invalid data

Solution 1:

Mozilla Firefox applies a pseudo class :-moz-ui-invalid to any invalid form control. If the form was never submitted or if all form input controls are valid when the form's submit() method is invoked then invoking the form's reset() method will cause the pseudo class to be removed from the input controls.

However, if any of the form's input controls are invalid when the form is submitted then the pseudo class will always be applied invalid input controls even after the form has been reset.

For full documentation and to download the commented javascript file go to: http://www.syn-to.com/moz-ui-invalid.php

var form; 

(function()
{
    "use strict";

    //name must be a valid form name eg. <form name="myFormName" ...
    form = function(name)
    {
        var a =
        {
            "registerReset": function()
            {
                //if the boxShadow property exists, bind the reset event handler//to the named formif(typeofdocument.forms[name].style.boxShadow !== 'undefined')
                {
                    document.forms[name].addEventListener('reset', a.resetEventHandler);
                }
            },

            "reset": function()
            {
                a.registerReset();
                document.forms[name].reset();
            },

            "resetEventHandler": function()
            {
                //override the default style and apply no boxShadow and register//an invalid event handler to each of the form's input controlsfunctionapplyFix(inputControls)
                {
                    for(var i=0;i<inputControls.length;i++)
                    {

                        inputControls[i].style.boxShadow = 'none';
                        inputControls[i].addEventListener('invalid', a.invalidEventHandler);
                        inputControls[i].addEventListener('keydown', a.keydownEventHandler);
                    }
                }

                var inputControls = this.getElementsByTagName('input');
                applyFix(inputControls);

                var inputControls = this.getElementsByTagName('textarea');
                applyFix(inputControls);

                var inputControls = this.getElementsByTagName('select');
                applyFix(inputControls);

            },

            "invalidEventHandler": function()
            {

                this.style.boxShadow = '';
                this.removeEventListener('invalid', a.invalidEventHandler);
                this.removeEventListener('keydown', a.keydownEventHandler);
            },

            //the following functions emulates the restore of :-moz-ui-invalid//when the user interacts with a form input control"keydownEventHandler": function()
            {
                this.addEventListener('blur', a.blurEventHandler);
            },

            "blurEventHandler": function()
            {
                this.checkValidity();
                this.removeEventListener('blur', a.blurEventHandler);
            }
        };

        return a;
    }

})();

Usage:

Either of the following 2 methods must be invoked prior to a native reset (invoking the form's reset() method):

<form name="formName" ...>...</form>

form('formName').registerReset();  //registers the event handlers once
form('formName').reset(); //registers the event handlers at the time reset is called //and then calls the form's native reset method, may be used //in place of the native reset

In my opinion, regardless of whether ajax is used or not and regardless of whether the user attempted to previously submit a form with invalid input controls, a reset ought to remove that style! I have filed a bug report however so far it is not deemed to be a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=903200

This should help someone else out as well.