Jak mogę zmienić lub usunąć domyślne komunikaty o błędach sprawdzania poprawności formularza HTML5?

Na przykład mam plik textfield. Pole jest obowiązkowe, wymagane są tylko cyfry, a długość wartości musi wynosić 10. Gdy próbuję przesłać formularz o wartości o długości 5, pojawia się domyślny komunikat o błędzie:Please match the requested format

<input type="text" required="" pattern="[0-9]{10}" value="">

1. Jak mogę zmienić domyślne komunikaty błędów walidacji formularza HTML 5?
2. Jeśli pierwszy punkt można zrobić, czy istnieje sposób na utworzenie plików właściwości i ustawienie w nich niestandardowych komunikatów o błędach?

Znalazłem błąd w odpowiedzi Ankur i naprawiłem go za pomocą tej poprawki:

 <input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity('Plz enter on Alphabets ')"
    onchange="try{setCustomValidity('')}catch(e){}" />

Błąd widoczny podczas ustawiania nieprawidłowych danych wejściowych, a następnie poprawiania danych wejściowych i wysyłania formularza. ups! nie możesz tego zrobić. Przetestowałem to na Firefoxie i Chrome

Używając pattern = wyświetli wszystko, co umieścisz w atrybucie tytułu, więc nie jest wymagany JS:

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />

<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />

Znalazłem ten kod w innym poście.

HTML:

<input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />

JAVASCRIPT:

function InvalidMsg(textbox) {

     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}

Fiddle Demo

Aby zapobiec wyświetlaniu komunikatu weryfikacji przeglądarki w dokumencie, za pomocą jQuery:

$('input, select, textarea').on("invalid", function(e) {
    e.preventDefault();
});

możesz usunąć ten alert, wykonując następujące czynności:

<input type="text" pattern="[a-zA-Z]+"
    oninvalid="setCustomValidity(' ')"
/>

po prostu ustaw wiadomość niestandardową na jedno puste miejsce

możesz je zmienić za pomocą interfejsu API walidacji ograniczeń: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

jeśli chcesz prostego rozwiązania, możesz skorzystać z civem.js, niestandardowych komunikatów o błędach sprawdzania poprawności danych wejściowych JavaScript lib do pobrania tutaj: https://github.com/javanto/civem.js Live demo tutaj: http://jsfiddle.net/ hleinone / njSbH /

SetCustomValidity pozwala zmienić domyślny komunikat walidacji. Oto prosty przykład jego użycia.

var age  =  document.getElementById('age');
    age.form.onsubmit = function () {
    age.setCustomValidity("This is not a valid age.");
 };

Przypadkowo znalazłem sposób: możesz użyć tego: błąd danych: „”

<input type="username" class="form-control" name="username" value=""
placeholder="the least 4 character"
data-minlength="4" data-minlength-error="the least 4 character"
data-error="This is a custom Errot Text fot patern and fill blank"
max-length="15" pattern="[A-Za-z0-9]{4,}"
title="4~15 character" required/>

Znalazłem błąd w odpowiedzi Mahoor13, nie działa w pętli, więc naprawiłem go za pomocą tej poprawki:

HTML:

<input type="email" id="eid" name="email_field" oninput="check(this)">

JavaScript:

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("Dude '" + input.value + "' is not a valid email. Enter something nice!!");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

Będzie doskonale działał w pętli.

To jest bardzo dobry link do sprawdzania różnych atrybutów walidacji HTML5.

https://dzone.com/articles/custom-validation-messages

Mam nadzieję, że to komuś pomoże.

Jak widać tutaj:

html5 oninvalid nie działa po poprawieniu pola wejściowego

Dobrze jest ująć to w ten sposób, bo po naprawieniu błędu komunikat ostrzegawczy znika.

<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />

Aby ustawić niestandardowy komunikat o błędzie na potrzeby walidacji HTML 5,

oninvalid="this.setCustomValidity('Your custom message goes here.')"

i usunąć tę wiadomość, gdy użytkownik wprowadzi prawidłowe użycie danych,

onkeyup="setCustomValidity('')"

Mam nadzieję, że to działa dla Ciebie. Cieszyć się ;)

To działa dla mnie w Chrome

    <input type="text" name="product_title" class="form-control" 
required placeholder="Product Name" value="" pattern="([A-z0-9À-ž\s]){2,}"
oninvalid="setCustomValidity('Please enter on Producut Name at least 2 characters long')"

po prostu możesz użyć "novalidate" dla tagu <form>

Kliknij tutaj, aby uzyskać więcej informacji