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

问题描述：

我有一个表单验证，我在输入下面插入错误以让用户知道他们错过了信息。我最初遇到一个错误，那就是多次单击提交，并且没有任何信息/不正确的电子邮件，而出现多个错误消息。通过禁用提交防止多个表单提交错误

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

我的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/

实现两个计算器解答下面是不成功的：在输入变化

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

Shell Form Does Not Validate JSFiddle

您应该改用装载机。这里是链接，https://www.w3schools.com/howto/howto_css_loader.asp –

'$（'input'）'返回一个元素的数组。我怀疑你有48个。 – James

答

火ATTR禁用/重新启用。

$('#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你是对的。我的回答集中在让用户的代码工作，而不是最佳实践。我已经相应地更新了我的答案。感谢您的高举。 – Ethilium

答

回答了3个问题：

这是发生，因为$('input').length将返回页面上<input>元素的量，不是在实际输入。
查看答案＃1
语法问题。状态的值作为变量，并从那里引用它：

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

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

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

相关推荐