Convalida in HTML5. : classe non valida dopo invio

Question

Sto costruendo un modulo e voglio usare il selettore :invalid per dare ai campi di input "richiesti" un bordo rosso se l'utente preme Invia senza riempirli, ma usando questo li fa apparire evidenziati proprio quando la pagina si carica. Sembra ostile dare questo tipo di avvertimento all'utente prima ancora di dargli la possibilità di riempirli almeno una volta.

C'è un modo in cui questi campi appaiono evidenziati solo dopo aver provato a inviare il modulo, detto in altro modo, c'è un modo per eseguire la convalida solo dopo aver fatto clic su Invia (o almeno perdendo l'attenzione sui campi di input richiesti?)

Answer 1

No, non c'è niente fuori dalla scatola.

Mozilla ha il suo pseudoclass per qualcosa di molto simile chiamato ": -moz-ui-invalid". Se si vuole raggiungere qualcosa di simile, è necessario utilizzare la convalida vincolo DOM-API:

if(document.addEventListener){ 
    document.addEventListener('invalid', function(e){ 
     e.target.className += ' invalid'; 
    }, true); 
} 

È anche possibile utilizzare webshims lib polyfill, che non solo i browser polyfill incapaci, ma aggiunge anche qualcosa di simile come -moz- non valido per tutti i browser (.form-ui-invalid).

Answer 2

Un altro modo è aggiungere una classe hide-hints agli input con JavaScript al caricamento. Quando un utente modifica un campo, rimuovi la classe.

Nel CSS, quindi applicare lo stile a input:not(.hide-hints):invalid. Ciò significa che lo stile di errore verrà mostrato anche agli utenti senza JavaScript.

Answer 3

per la convalida 'necessaria'

modo 1 - impostato 'richiesto' attributo per ogni elemento sulla forma presentare

// submit button event 
$('#form-submit-btn').click(function(event) { 
    // set required attribute for each element 
    $('#elm1, #elm2').attr('required','true'); 

    // since required attribute were not set (before this event), prevent form submission 
    if(!$('#form')[0].checkValidity()) 
     return; 

    // submit form if form is valid 
    $('#form').submit(); 

}); 

modo 2 - attributo uso 'dati'

<input type="text" data-required="1"> 

<script type="text/javascript"> 
// submit button event 
$('#form-submit-btn').click(function(event) { 
    // set required attribute based on data attribute 
    $(':input[data-required]').attr('required','true'); 

    // since required attribute were not set (before this event), prevent form submission 
    if(!$('#form')[0].checkValidity()) 
     return; 

    // submit form if form is valid 
    $('#form').submit(); 

}); 
</script> 

Answer 4

Vecchio domanda, ma per le persone che potrebbero trovare utile: ho creato un piccolo script che aggiunge una classe a un modulo quando si tenta di inviarlo, in modo da poter formattare le forme che hanno o non sono state ttempted essere presentata in modo diverso:

window.addEventListener('load', function() { 

    /** 
    * Adds a class `_submit-attempted` to a form when it's attempted to be 
    * submitted. 
    * 
    * This allows us to style invalid form fields differently for forms that 
    * have and haven't been attemted to submit. 
    */ 
    function addFormSubmitAttemptedTriggers() { 

     var formEls = document.querySelectorAll('form'); 

     for (var i = 0; i < formEls.length; i++) { 

      function addSubmitAttemptedTrigger(formEl) { 

       var submitButtonEl = formEl.querySelector('input[type=submit]'); 

       if (submitButtonEl) { 
        submitButtonEl.addEventListener('click', function() { 
         formEl.classList.add('_submit-attempted'); 
        }); 
       } 

      } 

      addSubmitAttemptedTrigger(formEls[i]); 

     } 

    } 

    addFormSubmitAttemptedTriggers(); 

}); 

Ora forme che sono tentato di essere presentati avranno una classe _submit-attempted, in modo da poter dare solo questi campi una casella rossa ombra:

input { 
    box-shadow: none; 
} 

form._submit-attempted input { 
    box-shadow: 0 0 5px #F00; 
} 

Answer 5

ho usato questo approccio per un mio progetto, in modo che i campi non validi sarebbero stati evidenziati solo dopo conferma:

HTML:

<form> 
    <input type="email" required placeholder="Email Address"> 
    <input type="password" required placeholder="Password"> 
    <input type="submit" value="Sign in"> 
</form> 

CSS:

input.required:invalid { 
    color: red; 
} 

JS (jQuery):

$('[type="submit"]').on('click', function() { 
    // this adds 'required' class to all the required inputs under the same <form> as the submit button 
    $(this) 
     .closest('form') 
     .find('[required]') 
     .addClass('required'); 
}); 

Answer 6

Molto semplice basta usare #ID: non valida: concentrarsi

Questo fa solo la convalida quando focalizzata su e non al caricamento della pagina