通過禁用提交防止多個表單提交錯誤

我有一個表單驗證，我在輸入下面插入錯誤以讓用戶知道他們錯過了信息。我最初遇到一個錯誤，那就是多次單擊提交，並且沒有任何信息/不正確的電子郵件，而出現多個錯誤消息。通過禁用提交防止多個表單提交錯誤

我解決了這個問題，當遇到失敗正則表達式的空名稱的條件滿足時，我將禁用屬性設置爲我的按鈕。然而，它創造了一個新問題 - 一旦提交屬性被設置爲禁用，它就是永久的。

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

來源

2017-05-04 kawnah

您應該改用裝載機。這裏是鏈接，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); 
    } 
});

來源

2017-05-04 15:30:43 Ethilium

儘管沒有必要（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.... }

來源

2017-05-04 17:29:54 kawnah

通過禁用提交防止多個表單提交錯誤

回答

相關問題