3

HTML 5 フォームがあります。わくわくします！私はxmlHttpRequestを使用してフォームを送信することにしました.jQueryを使用しているので$.post(...). それはうまくいきます、すごい。無効なデータを入力してフォームを送信すると、それらのフォーム コントロールの有効性状態が無効になります。ここまでは順調ですね。

ここで、フォームの入力コントロールに有効な値を入力し、フォームを再度送信します。今回は、フォームのreset()メソッドを呼び出した後、赤いボックス シャドウ スタイルが残る 1 つの点を除いて成功します。ただし、入力が対話後に無効な状態であったが、フォームを送信する前に有効な状態に修正された場合、フォームのreset()メソッドが呼び出されたときにスタイルが削除されます。

問題は、この動作をオーバーライドする方法です。

4

1 に答える 1

4

Mozilla Firefox は、:-moz-ui-invalid無効なフォーム コントロールに疑似クラスを適用します。フォームが送信されなかった場合、またはフォームのメソッドが呼び出されたときにすべてのフォーム入力コントロールが有効である場合、フォームのsubmit()メソッドを呼び出すreset()と、疑似クラスが入力コントロールから削除されます。

ただし、フォームの送信時にフォームの入力コントロールのいずれかが無効である場合、フォームがリセットされた後でも、疑似クラスには常に無効な入力コントロールが適用されます。

完全なドキュメントとコメント付きの JavaScript ファイルをダウンロードするには、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;
    }

})();

使用法：

reset()ネイティブ リセット (フォームのメソッドの呼び出し) の前に、次の 2 つのメソッドのいずれかを呼び出す必要があります。

<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 が使用されているかどうかに関係なく、ユーザーが以前に無効な入力コントロールを含むフォームを送信しようとしたかどうかに関係なく、リセットによってそのスタイルが削除されます。バグレポートを提出しましたが、これまでのところバグとは見なされていません: https://bugzilla.mozilla.org/show_bug.cgi?id=903200

これは、他の誰かにも役立つはずです。

于 2013-08-11T11:21:15.990 に答える