Wie kann ich eine Schaltfläche zur nächsten Seite nur gehen, wenn alle Formularfelder nicht leer sind

Question

Ich habe eine Schaltfläche, die ein Formular übermittelt, aber ich möchte auch, dass es eine Verknüpfung zu einer anderen Seite. Ich möchte nur, dass es mit der nächsten Seite verlinkt, wenn alle Felder im Formular ausgefüllt sind (alle Felder sind Pflichtfelder). Ich denke, dies wird JavaScript beinhalten, was in Ordnung ist, aber ich möchte jQuery vermeiden. Vielen Dank.

Answer 1

Die Art und Weise in der Regel es tun, ist, mit POST-Redirect-GET Normalform Vorlage kombinieren (der Server die Formulareinreichung akzeptiert, dann die Seite umleitet).

Mit normaler Formularübermittlung, alles, was Sie tun müssen, ist die Felder wie required wie so markiert:

<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

Nachdem die Formulareinreichung erfolgreich ist, leiten Sie die Seite vom Server -Seite zur nächsten Seite (oder zu einer Fehlerseite, falls etwas schief gelaufen ist).

Answer 2

Die Formularüberprüfung kann auf der Clientseite einfach mit dem Feld HTML5 required durchgeführt werden.

<input type="text" required /> 

Alle Browser unterstützen jedoch nicht HTML5 und für diese können Sie eine JavaScript-basierte Lösung verwenden. Dies kann auf unendlich viele Arten implementiert werden. Zum Beispiel durch Hinzufügen eines Ereignis-Listeners auf der Übergabeschaltfläche, Überprüfen, dass alle Felder nicht leer sind und andernfalls die Übermittlung verhindern.

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

Beachten Sie jedoch, dass aus Sicht der Sicherheit, sollten Sie nie Vertrauen Validierung Client-Seite, sondern tut es Server-Seite, solange die Überprüfung zum Zweck der Verbesserung der Benutzererfahrung nicht nur.