Question

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

当满足失败的正则表达式的空名称的条件时，我解决了我的设置已禁用的属性到我的按钮。但是它创建了一个新问题 - 一旦提交的属性设置为禁用，它就是永久性的。

我目前的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

Answer 1

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

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

Answer 2

回答3个问题：

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

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

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

通过已停用提交

2 个答案: