0

私がやりたいのは、フォームが投稿されたときに、スクリプトが特定の属性を持つすべての入力をループし、空の場合は赤でマークし、テキストを「このフィールドは必須です」に2秒間変更してから、変更します。デフォルトのテキストに戻ります。

各フィールドには、値としてフィールドのタイトルがあります。クリックするまで、フィールドは非表示になります。プレースホルダーのように。

スクリプトは正常に実行されますが、エラーテキストが表示されている2秒間にフォームを投稿しようとすると、送信されます。理由はわかりません。

コードは次のとおりです。

var isWorkingInputForm = false;

$(document).ready(function() {

    var defFormInputBgColor = null;

    // Warn user if required field is missing when posting form
    $('form').submit(function(e) {

        // Return is form is working
        if(isWorkingInputForm) console.log('is working');
        if(isWorkingInputForm) return false;

        // Halt is true by default.
        var halt = true;

        // Start working. If form is submitted between the start and stop it'll be ignored.
        isWorkingInputForm = true;

        // Nope, it's not working, let's loop through all inputs
        $('.formwrapper *[data-required="true"]').each(function(i, v) {
            console.log('not working');
            var val = $(this).val().trim();
            var defVal = $(this)[0].defaultValue.trim();
            var input = $(this);

            // Store bg color if not already stored
            if(!defFormInputBgColor) {
                defFormInputBgColor = $(this).css('background-color');
            }

            // Check if it's empty (or equal to the default value (placeholder))
            if( val == defVal || !val ) {
                halt = true;
                // Set red background
                $(input).css({
                    'background-color': '#FFDDDE'
                });
                // Show error text
                $(input).val('Det här fältet är obligatoriskt');

                // Wait for two seconds, then show the default text again
                setTimeout(function() {
                    $(input).val(defVal);
                }, 2000);
            } else {
                halt = false;
                $(input).css({
                    'background-color': defFormInputBgColor
                });
            }
        });

        isWorkingInputForm = false;

        if(halt) {
            // Form didn't validate, do nothing
            e.preventDefault();
        }
    });
});

isWorkingInputForm変数に注意してください。フォームが送信されるとすぐにTrueに設定され、スクリプトの下部で再びFalseに設定されます。

スクリプトの上部にあるように、isWorkingInputFormがtrueに設定されているかどうか（2秒間一時停止されていることを意味します）を確認し、設定されている場合はfalseを返します（続行しないでください）。

何らかの理由で、一時停止中に送信ボタンを押すと、フォームが送信されます。なぜ何かアイデアはありますか？

4

1 に答える 1

0

クリアするのがisWorkingInputForm早すぎます。ハンドラーが戻ったときにそれをクリアしていますが、これは 2 秒前です。isWorkingInputForm = falseタイムアウトに移動します。

setTimeout(function() {
  $(input).val(defVal);
  isWorkingInputForm = false;
}, 2000);
于 2012-11-09T13:42:37.647 に答える