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

вот код для обработки пользовательского сообщения об ошибке в 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."

Edit

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

Edit 2

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

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

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

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

здесь демо на jsFiddle.

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

вот код:

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.

попробуйте это, его лучше и испытаны:

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 требуется сообщение. Нет необходимости JS, или CSS только использовать HTML5.

сначала вы можете использовать этот атрибут только "oninvalid"

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')">

или вы можете использовать с атрибутом "oninput"

<input id="userid" type="text or others" required="" oninvalid="this.setCustomValidity('Hello Username cant be Blank!')" oninput="setCustomValidity('')">

самый простой и чистый способ, который я нашел, это использовать атрибут данных для хранения вашей пользовательской ошибки. Проверьте узел на правильность и обработайте ошибку с помощью некоторых пользовательских 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>

у меня есть более простое решение 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 с рабочим примером, и самый важный код там воспроизводится здесь:

Здравствуйте.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('')"