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

Например у меня есть textfield. Поле является обязательным, требуются только цифры и длина значения должна быть 10. Когда я пытаюсь отправить форму со значением, длина которого равна 5, появляется сообщение об ошибке по умолчанию:Please match the requested format

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

1. Как я могу изменить сообщения об ошибках проверки формы HTML 5 по умолчанию?
2. Если 1-й пункт может быть выполнен, то есть ли способ создать некоторые файлы свойств и установить в этих файлах пользовательские сообщения об ошибках?

Я нашел ошибку в ответе Анкура и исправил ее с помощью этого исправления:

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

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

При использовании pattern = он будет отображать все, что вы положили в атрибут заголовка, поэтому 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 ')" />

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

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

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

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

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

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

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

Вы можете изменить их через API проверки ограничений: http://www.w3.org/TR/html5/constraints.html#dom-cva-setcustomvalidity

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

SetCustomValidity позволяет изменить стандартное сообщение проверки. Вот простой пример того, как его использовать.

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

Я нашел способ случайно сейчас: вам нужно использовать это: 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/>

Я нашел ошибку в ответе 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("");  
    }                 
}  

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

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

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

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

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

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

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

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

Чтобы установить пользовательское сообщение об ошибке для проверки HTML 5,

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

и удалить это сообщение, когда пользователь вводит правильное использование данных,

onkeyup="setCustomValidity('')"

Надеюсь, что это работает для вас. Наслаждаться ;)

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

просто вы можете использовать «novalidate» для тега <form>

нажмите здесь, чтобы узнать больше