HTML5 форма обязательный атрибут. Установить пользовательское сообщение проверки?

У меня есть следующая форма HTML5: http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

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

РЕДАКТИРОВАТЬ: Также обратите внимание, что сообщение об ошибке поля типа пароля просто *****. Чтобы воссоздать это, введите имя пользователя и нажмите «Отправить».

РЕДАКТИРОВАТЬ : я использую Chrome 10 для тестирования. Пожалуйста, сделайте то же самое

Используйте setCustomValidity:

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

Я перешел на ванильный JavaScript из Mootools, как предложено @itpastorn в комментариях, но вы должны быть в состоянии выработать эквивалент Mootools, если это необходимо.

редактировать

Я обновил здесь код, так как он setCustomValidityработает немного иначе, чем я понял, когда первоначально отвечал. Если setCustomValidityустановлено значение, отличное от пустой строки, поле будет считаться недействительным; поэтому вы должны очистить его перед проверкой действительности, вы не можете просто установить его и забыть.

Дальнейшее редактирование

Как указано в комментарии @ thomasvdb ниже, вам нужно очистить пользовательскую валидность в каком-либо событии вне, invalidиначе может быть дополнительный проход через oninvalidобработчик для его очистки.

Вот код для обработки пользовательских сообщений об ошибках в HTML5

<input type="text" id="username" required placeholder="Enter Name"
    oninvalid="this.setCustomValidity('Enter User Name Here')"
    oninput="this.setCustomValidity('')"  />

Эта часть важна, потому что она скрывает сообщение об ошибке, когда пользователь вводит новые данные:

oninput="this.setCustomValidity('')"

Управлять пользовательскими сообщениями с помощью HTML5события очень простоoninvalid

Вот код:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

Это самое главное:

onvalid="this.setCustomValidity('')"

Примечание. Это больше не работает в Chrome и не тестируется в других браузерах. Смотрите правки ниже. Этот ответ оставлен здесь для исторической справки.

Если вы чувствуете, что строка проверки действительно не должна быть задана кодом, вы можете установить атрибут заголовка входного элемента следующим образом: «Это поле нельзя оставлять пустым». (Работает в Chrome 10)

title="This field should not be left blank."

Смотрите http://jsfiddle.net/kaleb/nfgfP/8/

А в Firefox вы можете добавить этот атрибут:

x-moz-errormessage="This field should not be left blank."

редактировать

Это, кажется, изменилось, так как я первоначально написал этот ответ. Теперь добавление заголовка не изменяет достоверность сообщения, оно просто добавляет приложение к сообщению. Скрипка выше все еще применяется.

Редактировать 2

Chrome теперь ничего не делает с атрибутом title в Chrome 51. Я не уверен, в какой версии это изменилось.

Управлять пользовательскими сообщениями с помощью HTML5 oninvalidсобытия очень просто

Вот код:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

Если установить и отменить установку setCustomValidityв нужное время, сообщение проверки будет работать без сбоев.

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

Я использовал onchangeвместо того, oninputкоторый является более общим и происходит, когда значение изменяется в любом состоянии даже через JavaScript.

Я сделал небольшую библиотеку, чтобы облегчить изменение и перевод сообщений об ошибках. Вы даже можете изменить текст по типу ошибки, который в настоящее время недоступен titleв Chrome или x-moz-errormessageFirefox. Перейти проверить его на GitHub , и давать обратную связь.

Он используется как:

<input type="email" required data-errormessage-value-missing="Please input something">

Там в демо доступны на jsFiddle .

Попробуйте это, это лучше и проверено:

HTML:

<form id="myform">
    <input id="email" 
           oninvalid="InvalidMsg(this);" 
           oninput="InvalidMsg(this);"
           name="email"  
           type="email" 
           required="required" />
    <input type="submit" />
</form>

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/

Самый простой и чистый способ, который я нашел, - это использовать атрибут data для хранения вашей ошибки. Проверьте правильность узла и обработайте ошибку, используя некоторый пользовательский HTML.

Le Javascript

if(node.validity.patternMismatch)
        {
            message = node.dataset.patternError;
        }

и немного супер HTML5

<input type="text" id="city" name="city" data-pattern-error="Please use only letters for your city." pattern="[A-z ']*" required>

Решение для предотвращения сообщений об ошибках Google Chrome при вводе каждого символа:

<p>Click the 'Submit' button with empty input field and you will see the custom error message. Then put "-" sign in the same input field.</p>
<form method="post" action="#">
  <label for="text_number_1">Here you will see browser's error validation message on input:</label><br>
  <input id="test_number_1" type="number" min="0" required="true"
         oninput="this.setCustomValidity('')"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

<form method="post" action="#">
  <p></p>
  <label for="text_number_1">Here you will see no error messages on input:</label><br>
  <input id="test_number_2" type="number" min="0" required="true"
         oninput="(function(e){e.setCustomValidity(''); return !e.validity.valid && e.setCustomValidity(' ')})(this)"
         oninvalid="this.setCustomValidity('This is my custom message.')"/>
  <input type="submit"/>
</form>

У меня есть более простое решение vanilla js only:

Для флажков:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.checked ? '' : 'My message');
};

Для входов:

document.getElementById("id").oninvalid = function () {
    this.setCustomValidity(this.value ? '' : 'My message');
};

Приспосабливая ответ Салара к JSX и React, я заметил, что React Select не ведет себя как <input/>поле в отношении проверки. По-видимому, необходимо несколько обходных путей, чтобы показать только пользовательское сообщение и не показывать его в неудобное время.

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

Hello.js

import React, { Component } from "react";
import SelectValid from "./SelectValid";

export default class Hello extends Component {
  render() {
    return (
      <form>
        <SelectValid placeholder="this one is optional" />
        <SelectValid placeholder="this one is required" required />
        <input
          required
          defaultValue="foo"
          onChange={e => e.target.setCustomValidity("")}
          onInvalid={e => e.target.setCustomValidity("foo")}
        />
        <button>button</button>
      </form>
    );
  }
}

SelectValid.js

import React, { Component } from "react";
import Select from "react-select";
import "react-select/dist/react-select.css";

export default class SelectValid extends Component {
  render() {
    this.required = !this.props.required
      ? false
      : this.state && this.state.value ? false : true;
    let inputProps = undefined;
    let onInputChange = undefined;
    if (this.props.required) {
      inputProps = {
        onInvalid: e => e.target.setCustomValidity(this.required ? "foo" : "")
      };
      onInputChange = value => {
        this.selectComponent.input.input.setCustomValidity(
          value
            ? ""
            : this.required
              ? "foo"
              : this.selectComponent.props.value ? "" : "foo"
        );
        return value;
      };
    }
    return (
      <Select
        onChange={value => {
          this.required = !this.props.required ? false : value ? false : true;
          let state = this && this.state ? this.state : { value: null };
          state.value = value;
          this.setState(state);
          if (this.props.onChange) {
            this.props.onChange();
          }
        }}
        value={this && this.state ? this.state.value : null}
        options={[{ label: "yes", value: 1 }, { label: "no", value: 0 }]}
        placeholder={this.props.placeholder}
        required={this.required}
        clearable
        searchable
        inputProps={inputProps}
        ref={input => (this.selectComponent = input)}
        onInputChange={onInputChange}
      />
    );
  }
}

Хорошо, oninvalid работает хорошо, но показывает ошибку, даже если пользователь ввел правильные данные. Поэтому я использовал ниже, чтобы заняться этим, надеюсь, это будет работать и для вас,

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

Может быть легко обработано, просто поместив 'title' с полем:

<input type="text" id="username" required title="This field can not be empty"  />