Як я можу змінити або видалити повідомлення про помилки перевірки форми 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

При використанні шаблону = він відображатиме все, що ви поклали в заголовок attrib, тому не потрібно 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/ хлейнон / 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>

натисніть тут, щоб отримати більше повідомлень