通过禁用提交防止多个表单提交错误答案

【问题标题】：Preventing multiple form submission errors via disabled submit通过禁用提交防止多个表单提交错误
【发布时间】：2017-10-02 20:57:02
【问题描述】：

我有一个表单验证，我在输入下方插入错误，让用户知道他们错过了信息。我最初遇到了一个错误，即在多次单击提交时没有信息/不正确的电子邮件形式出现多个错误消息。

当满足失败的正则表达式的空名称的条件时，我解决了我为按钮设置禁用属性的问题。然而它又产生了一个新问题——一旦提交的属性被设置为禁用，它就是永久的。

我目前的javascript如下：

// Login validation
  $('#customer_login').submit(function(e) {
    // gets email input value
    var emailinput = $('#customer_email').val();

    // login page password value
    var pwdinput = $('#customer_password').val();

    if ($('input').length > 1) {
      $('#customer_login :submit').attr('disabled', false);
    }

    // if it fails error and preventDefault otherwise submit
    if (emailReg.test(emailinput) === false || emailinput === '') {
      e.preventDefault();
      $('#customer_login :submit').attr('disabled', true);
      $('#customer_email').css('border-color', '#f84141');
      $('#customer_email').after('<br><span class="field-error">Please enter valid email</span>');
    }

    // if password field is blank prompt user to put it in
    if (pwdinput === '') {
      e.preventDefault();
      $('#customer_login :submit').attr('disabled', true);
      $('#customer_password').css('border-color', '#f84141');
      $('#customer_password').after('<br><span class="field-error">Please enter your password</span>');
    }
  });

作为对我的错误的潜在补救措施，我尝试在输入中有内容时取消禁用，我在这里尝试这样做：

if ($('input').length > 1) {
      $('#customer_login :submit').attr('disabled', false);
}

这在全局范围内本身不起作用。我尝试将此条件嵌套在每个检查表单输入值的 if 语句中，但这也不起作用。说了这么多，给我留下了 3 个问题：

目前，当我在控制台中运行 $('input').length 时，它总是返回 48，即使我的输入为空。为什么空输入会返回大于零的值？
我的测试电子邮件是 25 个字符，密码是 16 所以 25 + 16 = 41。即使我的测试电子邮件并在字段中传递，$('input').length 的值仍然是 48。为什么？
在控制台中运行 $('input').val().length 作为检查总是返回 0 - 为什么会这样？

我有一个 jsfiddle，但出现错误：{"error": "Please use POST request"} 尽管有 form action="POST"。更改为 form method="POST" 返回：

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x358a910>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0x3661710>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x358a910>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0x3661290>, 'help_text': '', 'name': 'js_wrap'}"}

https://jsfiddle.net/a4d5tLuh/2/

实现以下两个 stackoverflow 答案均未成功：

jsfiddle error {"error": "Please use POST request"} when submitting a form

Shell Form Does Not Validate JSFiddle

【问题讨论】：

你应该使用 loader 代替。这是链接，w3schools.com/howto/howto_css_loader.asp
$('input') 返回一个元素的数组。我怀疑你有 48 个。

标签： javascript jquery html forms

【解决方案1】：

在输入更改时触发属性禁用/重新启用。

$('#myTextbox').on('input', function() {
    if ($('input').length > 1) {
    $('#customer_login :submit').prop('disabled',false);
} else {
    $('#customer_login :submit').prop('disabled',true);
    }
});

【讨论】：

虽然没有必要（jQuery 对其进行了抽象），但使用.prop('disabled', true|false) 可能是个好主意。从技术上讲，disabled 属性不能（有效地）设置为“true”或“false”。但是，disabled 属性可以设置为布尔值。
@MikeMcCaughan 你是对的。我的回答侧重于让用户的代码正常工作，而不是最佳实践。我已经相应地更新了我的答案。感谢您的提醒。

【解决方案2】：

回答三个问题：

发生这种情况是因为 $('input').length 返回页面上 <input> 元素的数量，而不是实际输入中的内容。
查看#1 的答案
语法问题。将值声明为变量并从那里引用它：

var inputAmount = $('#customer_email').val();

if (inputAmount.length >= 1) { Do something here.... }

【讨论】：