Вопрос по html5, validation – Как я могу изменить или удалить сообщения об ошибках проверки формы HTML5 по умолчанию?
Например у меня естьtextfield
, Поле является обязательным, требуются только цифры и длина значения должна быть 10. Когда я пытаюсь отправить форму со значением, длина которого равна 5, появляется сообщение об ошибке по умолчанию:Please match the requested format
<code><input type="text" required="" pattern="[0-9]{10}" value=""> </code>How can I change HTML 5 form validation errors default messages? If 1st point can be done, so Is there a way to create some property files and set in that files custom error messages?
Я нашел ошибку в ответе Анкура и исправил ее следующим исправлением:
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')"
onchange="try{setCustomValidity('')}catch(e){}" />
Ошибка наблюдается, когда вы устанавливаете неверные входные данные, затем исправляете ввод и отправляете форму. упс! Вы не можете это сделать. Я проверил это на Firefox и Chrome
Как вы можете видеть здесь:
html5 oninvalid не работает после исправления поля ввода
Это хорошо, если вы исправите ошибку, и сообщение об ошибке исчезнет.
<input type="text" pattern="[a-zA-Z]+"
oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')" />
Вы можете изменить их через 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/
Чтобы установить пользовательское сообщение об ошибке для проверки HTML 5,
oninvalid="this.setCustomValidity('Your custom message goes here.')"
и удалить это сообщение, когда пользователь вводит правильное использование данных,
onkeyup="setCustomValidity('')"
Надеюсь, что это работает для вас. Наслаждаться ;)
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;
}
<input type="text" pattern="[a-zA-Z]+"
oninvalid="setCustomValidity('Plz enter on Alphabets ')" />
Я нашел этот код в другом посте.
Это очень хорошая ссылка, которую я нашел о проверке различных атрибутов проверок html5.
https://dzone.com/articles/custom-validation-messages
Надеюсь, это кому-нибудь поможет.
Я нашел ошибку в ответе 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("");
}
}
Это будет прекрасно работать в цикле.
Я нашел способ случайно сейчас: Вы можете использовать это: data-error: & quot; & quot;
<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/>