在从Firefox重置HTML 5后，输入上仍然显示红色边框

问题描述

我有一个HTML 5表单！太好了，我很兴奋！我决定使用xmlHttpRequest提交表单，我使用jQuery所以 $。post（...）。它工作，真棒。我输入一些无效数据并提交表单和那些表单控件有效性状态无效 - 如预期。到目前为止这么好。

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 and submit the form and those form controls validity state is invalid - as expect. So far so good.

现在我在表单的输入控件中输入有效的值，并再次提交表单，这次除了1个事情之外，在调用表单的 reset（）方法保持红色框阴影样式。然而，如果输入在与它们交互之后处于无效状态，但是在提交表单之前被纠正为有效状态，则当表单的 reset（）方法

Now I enter valid values into the form's input controls and submit the form again, this time it's successful except for 1 thing, after invoking the form's reset() method the red box-shadow style remains. However, if inputs were in an invalid state after interacting with them but then was corrected to a valid state before submitting the form then the style gets removed when the form's reset() method is invoked.

推荐答案

所以问题是如何覆盖这个行为？

Mozilla Firefox对任何无效的表单控件应用一个伪类： - moz-ui-invalid 。如果表单从未提交或者所有表单输入控件在表单的 submit（）方法被调用时是有效的，则调用表单的 reset（）方法将导致伪类从输入控件中删除。

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.

对于完整的文档和下载注释的javascript文件，请转到：

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 form

                if(typeof document.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 controls
                function applyFix(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;
    }

})();

用法：

必须在原生重置之前调用2个方法（调用窗体的 reset（）方法）：

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

在我看来，无论是否使用ajax，无论用户是否尝试使用无效的输入控件提交表单，重置应该删除那种风格！我提交了一个错误报告，但到目前为止，它不被认为是一个错误：

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

这应该可以帮助别人。

这篇关于在从Firefox重置HTML 5后，输入上仍然显示红色边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！