HTML5-Validierung, wenn der Eingabetyp nicht "submit" ist

Question

Ich verwende HTML5 für die Validierung von Feldern. Ich sende das Formular mit JavaScript auf Knopfdruck. Aber die HTML5-Validierung funktioniert nicht. Es funktioniert nur, wenn der Eingabetyp submit ist. Können wir etwas anderes tun, als JavaScript-Validierung zu verwenden oder den Typ zu submit zu ändern?

Dies ist der HTML-Code:

<input type="text" id="example" name="example" value="" required> 
<button type="button" onclick="submitform()" id="save">Save</button> 

Ich submitform() das Formular in der Funktion einreichen.

Answer 1

Der Formularvalidierungsprozess für HTML5 ist auf Situationen beschränkt, in denen das Formular über eine Übermittlungsschaltfläche gesendet wird. Die Form submission algorithm sagt explizit, dass die Validierung nicht durchgeführt wird, wenn das Formular über die submit() Methode gesendet wird. Offensichtlich ist die Idee, dass wenn Sie ein Formular über JavaScript senden, Sie eine Validierung durchführen sollen.

Sie können jedoch eine (statische) Formularvalidierung für die durch HTML5-Attribute definierten Einschränkungen anfordern, indem Sie die Methode checkValidity() verwenden. Wenn Sie dieselben Fehlermeldungen anzeigen möchten, die der Browser bei der HTML5-Formularvalidierung verwenden würde, müssten Sie alle Felder mit Einschränkungen überprüfen, da die validityMessage-Eigenschaft eine Eigenschaft von Feldern (Steuerelementen) und nicht das Formular ist . Im Fall eines einzelnen erzwungener Feldes, wie in dem Fall dargestellt, dann ist dies trivial natürlich:

function submitform() { 
    var f = document.getElementsByTagName('form')[0]; 
    if(f.checkValidity()) { 
    f.submit(); 
    } else { 
    alert(document.getElementById('example').validationMessage); 
    } 
} 

Answer 2

Versuchen mit <button type="submit"> können Sie die Funktionalität von submitform() durchführen, indem <form ....... onsubmit="submitform()">

Answer 3

tun Sie sollten Formular-Tag umschließt Ihre Eingaben verwenden. Und geben Sie ein, geben Sie ein.
Das funktioniert.

<form id="testform"> 
<input type="text" id="example" name="example" required> 
<button type="submit" onclick="submitform()" id="save">Save</button> 
</form> 

Da HTML5 Validation nur mit Senden funktioniert, müssen Sie es dort behalten. Sie können die Formularübergabe jedoch vermeiden, wenn sie gültig ist, indem Sie die Standardaktion verhindern, indem Sie den Ereignishandler für das Formular schreiben.

document.getElementById('testform').onsubmit= function(e){ 
    e.preventDefault(); 
} 

Dies wird Ihre Validierung geben, wenn ungültig und wird kein Formular bei der Gültigkeit senden.

Answer 4

kann ich zu spät sein, aber die Art, wie ich es tat, war eine Eingabe einreichen erstellen versteckt, und nenne es ist Klick-Handler beim Senden. So etwas wie (jquery der Einfachheit halber verwendet wird):

<input type="text" id="example" name="example" value="" required> 
<button type="button" onclick="submitform()" id="save">Save</button> 
<input id="submit_handle" type="submit" style="display: none"> 

<script> 
function submitform() { 
    $('#submit_handle').click(); 
} 
</script> 

Answer 5

Probieren Sie dies aus:

<script type="text/javascript"> 
    function test 
    { 
     alert("hello world"); //write your logic here like ajax 
    } 
</script> 

<form action="javascript:test();" > 
    firstName : <input type="text" name="firstName" id="firstName" required/><br/> 
    lastName : <input type="text" name="lastName" id="lastName" required/><br/> 
    email : <input type="email" name="email" id="email"/><br/> 
    <input type="submit" value="Get It!" name="submit" id="submit"/> 
</form> 

Answer 6

HTML5 Validierung funktionieren nur, wenn Knopf

Änderung vorlegen wird -

<button type="button" onclick="submitform()" id="save">Save</button> 

To -

<button type="submit" onclick="submitform()" id="save">Save</button> 

Answer 7

Ich wollte einen neuen Weg hinzufügen, auf den ich gerade erst gestoßen bin. Obwohl die Formularüberprüfung nicht ausgeführt wird, wenn Sie das Formular unter Verwendung der submit()-Methode senden, hält Sie nichts davon ab, programmgesteuert auf eine Übermittlungsschaltfläche zu klicken. Auch wenn es versteckt ist.

Mit einer Form:

<form> 
    <input type="text" name="title" required /> 
    <button style="display: none;" type="submit" id="submit-button">Not Shown</button> 
    <button type="button" onclick="doFancyStuff()">Submit</button> 
</form> 

Diese Form Validierung auslösen:

function doFancyStuff() { 
    $("#submit-button").click(); 
} 

oder ohne jQuery

function doFancyStuff() { 
    document.getElementById("submit-button").click(); 
} 

In meinem Fall habe ich eine Reihe von Validierungs- und Berechnungen Wenn die falsche Übermittlungsschaltfläche gedrückt wird, wenn meine manuelle Validierung fehlschlägt, dann weiß ich, dass ich programmgesteuert arbeiten kann Klicken Sie auf die verdeckte Schaltfläche "Senden" und zeigen Sie die Formularvalidierung an.

Hier ist ein sehr einfaches jsfiddle das Konzept zeigt:

https://jsfiddle.net/45vxjz87/1/

Answer 8

Entweder können Sie auf die Schaltfläche Typ

<button type="submit" onclick="submitform()" id="save">Save</button> 

zu submit ändern Oder Sie können den Absenden-Button verstecken, halten eine andere Taste mit type = "button" und Klick-Ereignis hat für diese Schaltfläche

<form> 
    <button style="display: none;" type="submit" >Hidden button</button> 
    <button type="button" onclick="submitForm()">Submit</button> 
</form>