Как я могу изменить или удалить сообщения об ошибках в форме HTML5 по умолчанию?

Ответ 1

Я нашел ошибку в ответе Ankur, и я исправил ее с помощью этой коррекции:

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

Ошибка при установке недопустимых входных данных, затем исправьте ввод и отправьте форму. упс! вы не можете этого сделать. Я тестировал его на firefox и chrome

Ответ 2

При использовании шаблона = он отобразит все, что вы указали в атрибуте title, поэтому нет необходимости в JS:

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

Ответ 3

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

Я нашел этот код в другом сообщении.

Ответ 4

Чтобы предотвратить появление сообщения подтверждения проверки браузера в вашем документе, с помощью jQuery:

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

Ответ 5

вы можете изменить их с помощью проверки привязки api: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

Если вы хотите простое решение, вы можете опрокинуть civem.js, сообщения об ошибках пользовательского ввода Valid JavaScript JavaScript скачать здесь: https://github.com/javanto/civem.js живая демонстрация здесь: http://jsfiddle.net/hleinone/njSbH/

Ответ 6

вы можете удалить это предупреждение, выполнив следующие действия:

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

просто установите специальное сообщение в одно пустое пространство

Ответ 7

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

Скриншот Демо

Ответ 8

Функция setCustomValidity позволяет вам изменить сообщение проверки по умолчанию. Вот простой пример того, как его использовать.

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

Ответ 9

Я нашел ошибку в ответе Mahoor13, она не работает в цикле, поэтому я исправил ее с помощью этой коррекции:

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("");  
    }                 
}  

Он отлично работает в цикле.

Ответ 10

Это очень хорошая ссылка, которую я нашел о проверке различных атрибутов проверки html5.

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

Надеюсь, что это поможет кому-то.

Ответ 11

Я нашел способ Случайно сейчас: вы можете использовать это: data-error: ""

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

Ответ 12

Как вы можете видеть здесь:

html5 oninvalid не работает после исправления поля ввода

Хорошо, что вы положили таким образом, потому что, когда вы исправляете ошибку, выводите предупреждающее сообщение.

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

Ответ 13

Это работа для меня в 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')"