只有在所有表單域不爲空的情況下，我如何才能使按鈕進入下一頁

Question

我有一個提交表單的按鈕，但我也希望它鏈接到另一個頁面。我只希望它鏈接到下一頁，如果表單中的所有字段都填入了（所有字段都是必需的）。我認爲這將涉及JavaScript，這很好，但我想避免jQuery。謝謝。

Answer 1

以通常方式做到這一點，是POST-Redirect-GET結合正常表單提交（服務器接受的表單提交，然後重定向頁面）。

與正常的表單提交，所有你需要做的是標記領域required像這樣：表單提交成功

<form method="post" action="/what/ever"> 
    <label>Name: <input required></label> 
    <label>Email: <input type="email" required></label> 

    <input type="submit" value="Send"> 
</form> 

Example

後，從服務器重定向頁面在下一頁（或出錯頁面，以防出現問題）。

Answer 2

表單驗證可以通過使用HTML5 required字段很容易地完成客戶端。

<input type="text" required /> 

但是，所有瀏覽器都不支持HTML5，對於那些您可以使用基於JavaScript的解決方案的用戶。這可以通過無數種方式來實現。例如，通過在提交按鈕上添加事件偵聽器，驗證所有字段都是非空的，否則會阻止提交。

var form = document.forms["form-name"]; 
var formFields = form.getElementsByTagName("input"); 

form.addEventListener("submit", function (event) { 
    var validationOk = true; 
    for (var i = 0; i < formFields.length; i++) { 
     if (formFields[i].value == "") { 
      validationOk = false; 
      // Here you probably also want to give the user some kind 
      // of feedback by adding a class to the field or similar 
     } 
    } 
    if (!validationOk) { 
     event.preventDefault(); 
    } 
}); 

但是，請注意，從安全角度來看，你應該從不信任客戶端驗證，而是做服務器端，只要驗證不僅是改善用戶體驗的目的。