Необхідний атрибут форми 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"/>

На даний момент, коли я натискаю клавішу Enter, коли вони обоє порожні, з'являється спливаюче вікно із написом "Будь ласка, заповніть це поле". Як я можу змінити це повідомлення за замовчуванням на "Це поле не можна залишати порожнім"?

РЕДАКТУВАННЯ: Також зверніть увагу, що повідомлення про помилку поля введення пароля просто***** . Щоб відтворити це, дайте ім’я користувача значення та натисніть кнопку "Надіслати".

EDIT : Я використовую 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 нічого не робить з атрибутом заголовка, як у 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/

Найпростіший і найпростіший спосіб, який я знайшов, - це використовувати атрибут даних для зберігання власної помилки. Перевірте правильність вузла та обробіть помилку, скориставшись спеціальним 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>

У мене є більш просте рішення з ванільним js:

Для прапорців:

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('')"

Можна легко впоратися, просто вписавши поле з заголовком:

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