HTML5 oninvalid non funziona dopo fissa il campo di inserimento

Question

Ho questo codice di ingresso nella mia forma:

<input maxlength="255" id="information_name" name="information[name]" oninvalid="check(this)" placeholder="Nombre Completo" required="required" size="30" style="width:528px;height:25px;" tabindex="3" type="text"> 

a cambiare il messaggio oninvalid con questo codice javascritp:

<script> 
function check(input) { 
    if (input.value == "") { 
    input.setCustomValidity('Debe completar este campo.'); 
    } else { 
    input.setCustomValidity('Debe corregir este campo.'); 
    } 

} 
</script> 

Ecco il problema, se ho cliccato su invia e il campo è vuoto, il campo shome l'errore, quindi ho bisogno di riempire il campo, ma dopo riempire il campo, ho ancora ricevendo l'avviso anche il riempimento non è vuoto.

Cosa sto facendo male ???

Answer 1

È possibile impostare un messaggio validità personalizzato con setCustomValidity, tuttavia qualsiasi stringa non vuota farà sì che il campo di agire come se avesse un valore non valido. È necessario setCustomValidity('') per cancellare lo stato invalidato del campo.

Se la validità è semplice e controllato tramite attributi di campo, è possibile utilizzare object.willValidate di fare il test e si imposta la validità del messaggio personalizzato:

oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')"

Answer 2

Se si utilizza il valore setCustomValidity per un valore diverso da una stringa vuota, lo stato input si troverà nello stato invalid. Quindi la tua condizione sta verificando un valore, quindi imposta il campo in modo che sia invalid in entrambi i casi. Solo setCustomValidity quando il valore nel campo è in realtà valida, altrimenti impostarlo su una stringa vuota:

<script> 
function check(input) { 
    if (input.value == "") { 
    input.setCustomValidity('Debe completar este campo.'); 
    } else { 
    input.setCustomValidity(''); 
    } 
} 
</script> 

Answer 3

Se si imposta un valore con setCustomValidity() allora il campo è non valido. Questa impostazione di una stringa di lunghezza diversa da zero fa sì che il browser consideri il campo non valido. Per avere effetti sul tuo nuovo input devi cancellare la validità personalizzata. Semplicemente è possibile utilizzare il seguente:

<input required maxlength="255" id="information_name" minlength=1 name="information[name]" oninvalid="setCustomValidity('Should not be left empty.')" 
    oninput="setCustomValidity('')" /> 

Non v'è alcuna necessità di utilizzare Javascript per questo.

Answer 4

Per me solo oninvalid="this.setCustomValidity(this.willValidate ? '' :'You must choose the account type from the list')" funziona. Ci sono molti problemi durante l'utilizzo con IE.