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キーを押すと、「このフィールドに入力してください」というポップアップボックスが表示されます。デフォルトのメッセージを「このフィールドを空白にすることはできません」に変更するにはどうすればよいですか？

編集：タイプパスワードフィールドのエラーメッセージは単にであることにも注意してください*****。これを再作成するには、ユーザー名に値を指定して送信を押します。

編集：私はテストに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("");
        };
    }
})

コメントで@itpastornが示唆しているように、MootoolsからバニラJavaScriptに変更しましたが、必要に応じて、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 51の時点で、title属性でChromeは何もしません。これが変更されたバージョンはわかりません。

の助けを借りてカスタムメッセージを制御することは非常に簡単です 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を介しても任意の条件で値が変更されたときに発生します。

エラーメッセージの変更と翻訳を簡単にするために、小さなライブラリを作成しました。titleChromeや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>

ジャバスクリプト：

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への答えをして反応、私が選択したばかりのように動作しない反応することを気づい<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"  />