html5 oninvalid nie działa po stałym polu wprowadzania

Question

Mam ten kod wejściowy w moim formularzu:

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

zmienić oninvalid wiadomość z tego kodu javascript:

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

} 
</script> 

Oto problem, jeśli kliknąłem na przesłanie, a pole jest puste, pole shome błędu, więc muszę wypełnić pole, ale po wypełnieniu pola, wciąż otrzymuję ostrzeżenie, nawet wypełnienie nie jest puste.

Co robię źle?

Answer 1

Można ustawić niestandardowy komunikat ważność z setCustomValidity jednak każdy niepusty ciąg spowoduje pole do działania jako jeśli miał nieprawidłową wartość. Aby usunąć unieważniony stan pola, musisz wykonać setCustomValidity('').

Jeśli ważność jest prosta i kontrolowane poprzez atrybuty polowych, można użyć object.willValidate zrobić test i ustawić niestandardowy komunikat Ważność:

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

Answer 2

Jeśli podłączysz setCustomValidity do dowolnej wartości, która nie jest pustym ciągiem, spowoduje to, że input będzie w stanie invalid. Zatem twój warunek sprawdza wartość, a następnie ustawia pole w taki sposób, aby było invalid. Tylko setCustomValidity gdy wartość w polu jest rzeczywiście nieważne, inaczej ustawić go na pusty ciąg znaków:

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

Answer 3

Jeśli ustawisz wartość z setCustomValidity() to pole jest nieważny. To ustawienie niezerowej długości łańcucha powoduje, że przeglądarka uznaje to pole za nieważne. Aby wykorzystać efekty nowych danych wejściowych, musisz wyczyścić niestandardową poprawność. prostu można użyć następujących:

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

Nie ma potrzeby korzystania z Javascript w tej sprawie.

Answer 4

Dla mnie działa tylko . Podczas korzystania z IE występuje wiele problemów.