Установите настраиваемое сообщение проверки правильности поля HTML5

Обязательная проверка правильности поля

У меня есть одна форма со многими полями ввода. Я положил html5 валидации

 

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

"Please fill out this field"

Кто-нибудь может помочь мне изменить это сообщение?

У меня есть код javascript для его редактирования, но он не работает

 $(document).ready(function() { var elements = document.getElementsByName("topicName"); for (var i = 0; i < elements.length; i++) { elements[i].oninvalid = function(e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { e.target.setCustomValidity("Please enter Room Topic Title"); } }; elements[i].oninput = function(e) { e.target.setCustomValidity(""); }; } }) 

Индивидуальные проверки электронной почты

У меня есть следующая форма HTML

 

Сообщения о проверке, которые мне нужны.

Обязательное поле: Введите адрес электронной почты
Неверная электронная почта: «testing @ .com» не является допустимым адресом электронной почты. ( здесь введен адрес электронной почты, отображаемый в текстовом поле )

Я пробовал это.

 function check(input) { if(input.validity.typeMismatch){ input.setCustomValidity("'" + input.value + "' is not a Valid Email Address."); } else { input.setCustomValidity(""); } } 

Эта функция работает неправильно. Есть ли у вас какой-либо другой способ сделать это? Было бы признательно.

Фрагмент кода

Поскольку этот ответ получил очень много внимания, вот хороший настраиваемый fragment, который я придумал:

 /** * @author ComFreek  * @link https://stackoverflow.com/a/16069817/603003 * @license MIT 2013-2015 ComFreek * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek * You MUST retain this license header! */ (function (exports) { function valOrFunction(val, ctx, args) { if (typeof val == "function") { return val.apply(ctx, args); } else { return val; } } function InvalidInputHelper(input, options) { input.setCustomValidity(valOrFunction(options.defaultText, window, [input])); function changeOrInput() { if (input.value == "") { input.setCustomValidity(valOrFunction(options.emptyText, window, [input])); } else { input.setCustomValidity(""); } } function invalid() { if (input.value == "") { input.setCustomValidity(valOrFunction(options.emptyText, window, [input])); } else { input.setCustomValidity(valOrFunction(options.invalidText, window, [input])); } } input.addEventListener("change", changeOrInput); input.addEventListener("input", changeOrInput); input.addEventListener("invalid", invalid); } exports.InvalidInputHelper = InvalidInputHelper; })(window); 

Применение

→ jsFiddle

  
 InvalidInputHelper(document.getElementById("email"), { defaultText: "Please enter an email address!", emptyText: "Please enter an email address!", invalidText: function (input) { return 'The email address "' + input.value + '" is invalid!'; } }); 

Подробнее

  • defaultText отображается первоначально
  • emptyText отображается, когда вход пуст (очищается)
  • invalidText отображается, когда в браузере помечен как недействительный (например, если он не является допустимым адресом электронной почты)

Вы можете назначить строку или функцию каждому из трех свойств.
Если вы назначаете функцию, она может принимать ссылку на входной элемент (узел DOM) и должна возвращать строку, которая затем отображается как сообщение об ошибке.

Совместимость

Протестировано:

  • Chrome Canary 47.0.2
  • IE 11
  • Microsoft Edge (с использованием обновленной версии от 28.08.2015)
  • Firefox 40.0.3
  • Opera 31.0

Старый ответ

Вы можете увидеть старую версию здесь: https://stackoverflow.com/revisions/16069817/6

Вы можете просто достичь этого, используя атрибут oninvalid, проверить этот демонстрационный код

 

введите описание изображения здесь

Попробуй это:

 $(function() { var elements = document.getElementsByName("topicName"); for (var i = 0; i < elements.length; i++) { elements[i].oninvalid = function(e) { e.target.setCustomValidity("Please enter Room Topic Title"); }; } }) 

Я тестировал это в Chrome и FF, и он работал в обоих браузерах.

HTML:

 

JAVASCRIPT:

 function InvalidMsg(textbox) { if (textbox.value == '') { textbox.setCustomValidity('Required email address'); } else if (textbox.validity.typeMismatch){{ textbox.setCustomValidity('please enter a valid email address'); } else { textbox.setCustomValidity(''); } return true; } 

Демо:

http://jsfiddle.net/patelriki13/Sqq8e/

Человек, я никогда не делал этого в HTML 5, но я попробую. Взгляните на эту скрипку.

Я использовал некоторые события и свойства jQuery, HTML5 и пользовательский атрибут на входном теге (это может вызвать проблему, если вы попытаетесь выполнить проверку своего кода). Я не тестировался во всех браузерах, но думаю, что это может сработать.

Это код JavaScript проверки поля с помощью jQuery:

 $(document).ready(function() { $('input[required], input[required="required"]').each(function(i, e) { e.oninput = function(el) { el.target.setCustomValidity(""); if (el.target.type == "email") { if (el.target.validity.patternMismatch) { el.target.setCustomValidity("E-mail format invalid."); if (el.target.validity.typeMismatch) { el.target.setCustomValidity("An e-mail address must be given."); } } } }; e.oninvalid = function(el) { el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : ""); }; }); }); 

Ницца. Вот простая форма html:

 

Обязательным атрибутом атрибута является пользовательский атрибут, о котором я говорил. Вы можете установить свое сообщение для каждого требуемого поля, потому что jQuery получит от него, когда отобразит сообщение об ошибке. Вам не нужно устанавливать каждое поле прямо на JavaScript, jQuery делает это за вас. Это регулярное выражение кажется прекрасным (по крайней мере, оно блокирует ваше testing@.com ! Haha)

Как вы можете видеть на скрипке, я делаю дополнительную проверку формы отправки формы ( это также происходит с document.ready ):

 $("#validation").on("submit", function(e) { for (var i = 0; i < e.target.length; i++) { if (!e.target[i].validity.valid) { window.alert(e.target.attributes.requiredmessage.value); e.target.focus(); return false; } } }); 

Надеюсь, это все-таки поможет или поможет вам.

Это хорошо работает для меня:

 jQuery(document).ready(function($) { var intputElements = document.getElementsByTagName("INPUT"); for (var i = 0; i < intputElements.length; i++) { intputElements[i].oninvalid = function (e) { e.target.setCustomValidity(""); if (!e.target.validity.valid) { if (e.target.name == "email") { e.target.setCustomValidity("Please enter a valid email address."); } else { e.target.setCustomValidity("Please enter a password."); } } } } }); 

и форму, которую я использую с (усеченным):

 

введите описание изображения здесь

Вы можете сделать это, настроив прослушиватель событий на «недопустимый» на все входы одного и того же типа или только один, в зависимости от того, что вам нужно, а затем настройте правильное сообщение.

 [].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) { emailElement.addEventListener('invalid', function() { var message = this.value + 'is not a valid email address'; emailElement.setCustomValidity(message) }, false); emailElement.addEventListener('input', function() { try{emailElement.setCustomValidity('')}catch(e){} }, false); }); 

Вторая часть скрипта, сообщение о действительности будет сброшено, поскольку в противном случае невозможно будет отправить форму: например, это предотвратит запуск сообщения, даже если адрес электронной почты был исправлен.

Также вам не нужно настраивать поле ввода по мере необходимости, так как «invalid» будет запущен после того, как вы начнете вводить ввод.

Вот сценарий для этого: http://jsfiddle.net/napy84/U4pB7/2/ Надеюсь, что это поможет!

Просто нужно получить элемент и использовать метод setCustomValidity.

пример

 var foo = document.getElementById('foo'); foo.setCustomValidity(' An error occurred'); 

Используйте атрибут «title» в каждом теге ввода и напишите на нем сообщение

вы можете просто использовать атрибут oninvalid = “ , с bingding this.setCustomValidity () eventListener !

Вот мои демо-коды! (Вы можете запустить его, чтобы проверить!) введите описание изображения здесь

 < !DOCTYPE html>    oninvalid   

Вы можете добавить этот скрипт для показа собственного сообщения.

   

Для других валидаций, таких как несоответствие шаблонов, вы можете добавить addtional, если другое условие

как

 else if (input.validity.patternMismatch) { e.target.setCustomValidity("Your Message"); } 

существуют другие условия достоверности, такие как rangeOverflow, rangeUnderflow, stepMismatch, typeMismatch, valid