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

131

Например у меня есть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?
Я нашел ошибку в ответе Mahoor13, она не работает в цикле, поэтому я ее исправил & amp; дайте ответ с некоторыми исправлениями, которые вы можете найти в разделе ответов.Here is the link stackoverflow.com/questions/10361460/… Darshan Gorasia

Ваш Ответ

15   ответов
13

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

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

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

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

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

@ Mahoor13 Я написал это примерно так, но это никогда не подтверждается. Можете ли вы дать мне подсказку?jsfiddle.net/2USxy
Вы также можете добавить собственное свойство Firefox, которое работает хорошо: x-moz-errormessage = & quot; Пожалуйста, введите только цифры & quot;
Я предлагаю не использовать встроенные события. Это не очень хорошая практика.
лучше использовать & quot; onkeyup & quot; вместо "onchange" эффективно увидеть, если вход действителен или нет.
Это имеет следующую проблему (по крайней мере, в Chrome 55): когда всплывает недействительное сообщение, если пользователь сохраняет фокус в недопустимом поле (не щелкая) и редактирует поле, сообщение продолжает всплывать - даже если поле действительно - это ; s необходимо либо сфокусироваться, либо вызвать отправку.
1

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

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

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

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

Вы можете изменить их через 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/

3

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

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

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

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

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

onkeyup="setCustomValidity('')"

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

11

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

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

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

Обратите внимание на следующий пост при рассмотрении использования setCustomValitidystackoverflow.com/questions/16867407/…
спасибо, у меня это сработало. Хотя я не нашел пост или блог или сайт, упоминающий это.
0

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

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

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

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

0

просто вы можете использовать & quot; novalidate & quot; для & lt; форма & gt; тег

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

2

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

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

12

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

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

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

89

При использовании pattern = он будет отображать все, что вы положили в атрибут заголовка, поэтому JS не требуется, просто сделайте:

<input type="text" required="" pattern="[0-9]{10}" value="" title="This is an error message" />
Заголовок также используется в качестве текста всплывающей подсказки при наведении мыши, так что это, вероятно, лучший подход.
Когда я устанавливаю заголовок «foo» Я получаю & quot; Пожалуйста, выберите нужный формат. foo & quot ;, так что это не сработает для меня
Заголовок также используется в качестве текста всплывающей подсказки при наведении курсора мыши, поэтому я бы не использовал этот подход.
Хороший ответ, но будьте осторожны с обратной (или даже текущей) совместимостью здесь.
Очень хороший ответ. Но, как и во всем HTML5, надежность зависит от браузера. Это решение отлично работало с FF 15 и Chrome 22, но не с Safari 5. (протестировано с OS X Lion)
1

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

Похожие вопросы