risposta-alla-domanda-sullo-sviluppo-web-bd.com

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

Sto usando HTML5 per la validazione dei campi. Sto inviando il modulo utilizzando JavaScript con un clic sul pulsante. Ma la convalida HTML5 non funziona. Funziona solo quando il tipo di input è submit . Possiamo fare qualcosa di diverso dall'uso della convalida JavaScript o dalla modifica del 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 inviando il modulo nella funzione submitform().

58
I'm nidhin

Il processo di convalida del modulo HTML5 è limitato alle situazioni in cui il modulo viene inviato tramite un pulsante di invio. Algoritmo di invio modulo afferma esplicitamente che la convalida non viene eseguita quando il modulo viene inviato tramite il metodo submit(). Apparentemente, l'idea è che se invii un modulo tramite JavaScript, dovresti effettuare la convalida.

Tuttavia, è possibile richiedere la convalida del modulo (statico) rispetto ai vincoli definiti dagli attributi HTML5, utilizzando il metodo checkValidity(). Se desideri visualizzare gli stessi messaggi di errore del browser nella convalida del modulo HTML5, temo che dovrai controllare tutti i campi vincolati, poiché la proprietà validityMessage è una proprietà dei campi (controlli ), non il modulo. Nel caso di un singolo campo vincolato, come nel caso presentato, questo è ovviamente banale:

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

Potrei essere in ritardo, ma il modo in cui l'ho fatto è stato quello di creare un input di invio nascosto e chiamare il gestore dei clic dopo l'invio. 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>
13
Bekodo

Dovresti usare il tag del modulo che racchiude i tuoi input. E inserisci il tipo di input.
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, devi mantenerlo lì. È possibile evitare l'invio del modulo anche se valido impedendo l'azione predefinita scrivendo il gestore eventi per il modulo.

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

Ciò fornirà la tua convalida quando non è valida e non invierà il modulo quando è valido.

8
Vishwanath

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

5
Ahmed

È possibile modificare il tipo di pulsante in submit

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

Oppure puoi nascondere il pulsante di invio, tenere un altro pulsante con type = "button" e avere un evento click per quel pulsante

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

Volevo aggiungere un nuovo modo di farlo che mi sono imbattuto di recente. Anche se la convalida del modulo non viene eseguita quando si invia 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 un modulo:

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

Ciò attiverà la convalida del modulo:

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

O senza jQuery

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

Nel mio caso, eseguo una serie di convalide e calcoli quando viene premuto il pulsante di invio falso, se la mia convalida manuale non riesce, quindi so che posso fare clic programmaticamente 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/

4
Blunderfest

Convalida HTML5 funziona solo quando verrà inviato il tipo di pulsante

modificare --

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

A --

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

Prova questo:

<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>
2
Sumeet Patil

Aggiornamento 2019: la segnalazione degli errori di convalida ora è resa più semplice rispetto al momento della risposta accettata dall'uso di HTMLFormElement.reportValidity () che non controlla solo la validità come checkValidity() ma riporta anche errori di convalida per l'utente.

Il metodo HTMLFormElement.reportValidity () restituisce true se i controlli figlio dell'elemento soddisfano i vincoli di convalida. Quando viene restituito false, vengono generati eventi non validi annullabili per ogni figlio non valido e vengono segnalati all'utente problemi di convalida.

Snippet di soluzione aggiornato:

function submitform() {
  var f = document.getElementsByTagName('form')[0];
  if(f.reportValidity()) {
    f.submit();
  }
}
0
Laurent