0

我想要做的是当一个表单被发布时，脚本循环遍历具有特定属性的所有输入，如果它是空的，它会将其标记为红色并将文本更改为“此字段是必需的”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（意味着它被暂停了两秒钟），如果是，则返回 false（不要继续）。

出于某种原因，如果我在暂停时按下提交按钮，表单就会提交。任何想法为什么？

4

1 回答 1

0

你清理的isWorkingInputForm太快了。当处理程序返回时，您正在清除它，这是在两秒钟之前。进入isWorkingInputForm = false超时：

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