Convalida HTML5 quando il tipo di input non è "submit"

Question

Sto utilizzando HTML5 per la convalida dei campi. Sto inviando il modulo utilizzando JavaScript su un clic del pulsante. Ma la validazione HTML5 non funziona. Funziona solo quando il tipo di input è submit. Possiamo fare qualcosa di diverso dall'usare la convalida JavaScript o cambiare il tipo in submit?

Questo è il codice HTML:

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

sto presentando il modulo nella funzione submitform().

Answer 1

Il processo di convalida del modulo HTML5 è limitato alle situazioni in cui il modulo viene inviato tramite un pulsante di invio. Il Form submission algorithm afferma esplicitamente che la convalida non viene eseguita quando il modulo viene inviato tramite il metodo submit(). Apparentemente, l'idea è che se si invia un modulo tramite JavaScript, si suppone di fare la convalida.

Tuttavia, è possibile richiedere la convalida della forma (statica) rispetto ai vincoli definiti dagli attributi HTML5, utilizzando il metodo checkValidity(). Se si desidera visualizzare gli stessi messaggi di errore che il browser farebbe nella convalida del modulo HTML5, temo che sia necessario controllare tutti i campi vincolati, poiché la proprietà validityMessage è una proprietà di campi (controlli), non il modulo . Nel caso di un singolo campo vincolata, come nel caso presentato, questo è banale, naturalmente:

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

Answer 2

Prova con <button type="submit"> è possibile eseguire la funzionalità di submitform() facendo <form ....... onsubmit="submitform()">

Answer 3

Si dovrebbe usare tag form allegando i propri ingressi. E inserire il tipo di invio.
Questo funziona.

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

Poiché la convalida HTML5 funziona solo con il pulsante di invio, è necessario mantenerlo. È possibile evitare l'invio del modulo anche se valido impedendo l'azione predefinita scrivendo il gestore di eventi per il modulo.

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

Questo darà la convalida quando non valido e non invierà modulo quando valido.

Answer 4

io possa essere in ritardo, ma il modo in cui l'ho fatto è stato quello di creare un nascosti presentare in ingresso, e chiamando è fare clic su gestore su submit. Qualcosa di simile (usando jQuery per semplicità):

<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

provare questo fuori:

<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 convalida funzionano solo quando tipo di pulsante sarà presentare

cambiamento -

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

A -

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

Answer 7

Volevo aggiungere un nuovo modo di fare ciò che ho appena incontrato. Anche se la convalida del modulo non viene eseguita quando invii il modulo utilizzando il metodo submit(), non c'è nulla che ti impedisca di fare clic su un pulsante di invio a livello di codice. Anche se è nascosto.

Avere una forma:

<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> 

Questo attiverà validazione dei form:

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

O senza jQuery

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

Nel mio caso, faccio un po 'di validazione e calcoli quando viene premuto il pulsante di invio falso, se la mia convalida manuale fallisce, so che posso programmaticamente fare clic sul pulsante di invio nascosto e visualizzare la convalida del modulo.

Ecco un jsfiddle molto semplice che mostra il concetto:

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

Answer 8

o si può cambiare il tipo di pulsante per submit

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

oppure si può nascondere il pulsante di invio, tenere un altro pulsante con type = "button" e hanno un evento click per quel pulsante

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