Как изменить сообщение по умолчанию требуемого поля в popover формы-управления в начальной загрузке?

 <form class="form-asd" role="form">
    <h2 class="form-signin-heading">login</h2><hr />
    <label class="control-label"  for="username">Username</label>
    <input class="form-control" type="email"  required="" placeholder="username"data-error="enter valid username"></input>
    <label class="control-label"  for="username">password</label>
    <input class="form-control" type="password"  required=" " placeholder="Password"></input>
    <label class="checkbox"></label>
    <button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>

как мы можем изменить это сообщение по умолчанию popover поля require "Пожалуйста, заполните это поле" на "пожалуйста, введите имя пользователя"

Ответы

Ответ 1

Вы можете использовать функцию setCustomValidity, когда происходит событие oninvalid.

Как ниже: -

<input class="form-control" type="email" required="" 
    placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>

Обновление: -

Чтобы очистить сообщение после запуска ввода, используйте атрибут oninput="setCustomValidity(''), чтобы очистить сообщение.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

Ответ 2

Комбинация ответов Мритонджей и Барту - полный ответ на этот вопрос. Я копирую полный пример.

<input class="form-control" type="email"  required="" placeholder="username"
 oninvalid="this.setCustomValidity('Please Enter valid email')"
 oninput="setCustomValidity('')"></input>

Здесь

this.setCustomValidity('Пожалуйста, введите действительный адрес электронной почты') ". Отобразите пользовательское сообщение о недействительности поля

oninput = "setCustomValidity ('')" - удалить сообщение о недействительности в подтвержденной форме.

Ответ 3

И для ввода и выбора:

$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");

Ответ 4

$ ("input [required]"). attr ("oninvalid", "this.setCustomValidity('Say Somthing!')");

это работает, если вы переходите к предыдущему или следующему полю с помощью мыши, но с помощью клавиши ввода, это не работает !!!