Überprüfen Sie alle Felder gleichzeitig mit HTML5 und nicht einzeln.

Gibt es eine Möglichkeit, HTML5 dafür zu sorgen, dass alle Felder gleichzeitig und nicht jeweils einzeln geprüft werden?Überprüfen Sie alle Felder gleichzeitig mit HTML5 und nicht einzeln.

Die Verwendung von ein paar Zeilen JavaScript ist in Ordnung, aber ich möchte nicht wirklich ein ganzes Modul dafür verwenden.

Ich habe ziemlich viel gesucht, konnte aber keine saubere Lösung dafür finden.

Hier ist ein Musterformular:

<html> 
    <head> 
     <title>Validation Test</title> 
     <link href="css/style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <form action="" id="myForm" method="post"> 
     <input id="name" name="name" required type="text"> 
     <input id="phone" name="phone" required type="text"> 
     <input type="submit" value="Submit"> 
     </form> 
    </body> 
</html>

Css-Datei:

input:focus:required:invalid { 
    border: 2px solid red !important; 
}

Der Pfosten schlug als ein mögliches Duplikat ist für ein Feld mehrere Validierungsbedingungen für mit, ich bin Überprüfen, ob alle ungültigen Felder gleichzeitig angezeigt werden.

Quelle

2015-09-29 Mankind1023

möglich Duplikat [wie mehrere Eingabevalidierung mit HTML5? Machen] (http://stackoverflow.com/questions/14114267/how-to-make-multiple-input-validation-using-html5) – halfzebra

Danke, aber dieser Post ist für mehrere Validierungsbedingungen für ein Feld, ich möchte alle ungültigen Felder auf einmal überprüfen/anzeigen. – Mankind1023

Machst du nur grundlegende Validierung (keine Nullfelder) oder etwas komplexeres? –

Wenn Sie jQuery nicht verwenden wollen, ist das in Ordnung. Sie können dies leicht mit vanille js Event-Handlern und DOM-Selektoren tun. Ich benutze jQuery, um mir Zeit zu sparen.

$('#myForm').on('submit', function() { 
    var $inputs = $(this).find(':input'), 
     isValid = true; 

    $inputs.each(function() { 
    if ($(this).val() == '') { 
     isValid = false; 
     $(this).addClass('error-control'); 
    } else { 
     $(this).removeClass('error-control'); 
    } 
    }); 

    return isValid 
});

Quelle

2015-09-29 17:30:32

Das funktionierte wirklich gut mit dem, was ich tat, danke. – Mankind1023

Verwenden Sie die onSubmit auf dem Formular-Tag:

See: http://www.w3schools.com/js/js_validation.asp

<form action="" id="myForm" method="post" onsubmit="return validateForm()">

Js:

function validateForm() { 
    // validate form here 
    // return false if there are errors 
    // return true to submit the form 
}

Quelle

2015-09-29 17:25:41

Überprüfen Sie alle Felder gleichzeitig mit HTML5 und nicht einzeln.

Antwort

Verwandte Themen