すべてのフォームフィールドが空でない場合にのみ、次のページに進むことができます

Question

フォームを送信するボタンがありますが、別のページにリンクしたい場合もあります。フォームのすべてのフィールドが入力されている場合は、次のページにリンクする必要があります（すべてのフィールドは必須です）。私はこれがJavaScriptを含むと思っていますが、それは問題ありませんが、私はjQueryを避けたいと思います。ありがとう。

Answer 1

通常の方法では、通常のフォーム送信とPOST-Redirect-GETを組み合わせて使用​​します（サーバーはフォームの送信を受け付けてからページをリダイレクトします）。フォームの送信が成功した

<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

した後、サーバーからページをリダイレクトする：あなたがする必要があるすべてのようにのようなrequiredとしてフィールドをマークしている通常のフォーム送信に

、次のページ（または何らかの問題が発生した場合のエラーページ）に表示されます。

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(); 
    } 
}); 

しかし、セキュリティの観点から、あなたはは、クライアント側の検証を信頼していないのではなく、限りの検証だけではなく、ユーザーエクスペリエンスを改善するためであるとして、それをサーバ側の操作を行いんことに注意してください。