Question

我想要做的是当发布表单时，脚本循环遍历具有特定属性的所有输入，如果它是空的，则将其标记为红色并将文本更改为“此字段是必需的”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（不要继续）。< / p>

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

Answer 1

您即将清除isWorkingInputForm。您在处理程序返回时清除它，这是在两秒之前的方式。将isWorkingInputForm = false移至超时：

setTimeout(function() {
  $(input).val(defVal);
  isWorkingInputForm = false;
}, 2000);

jQuery：提交后两秒钟使表单“不可用”？

1 个答案: