web-dev-qa-db-ja.com

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

編集： また、type passwordフィールドのエラーメッセージは単に*****です。これを再作成するには、ユーザー名に値を入力して送信を押します。

_ edit _ ：テストにはChrome 10を使用しています。同じようにしてください

javascripthtmlhtml5formsvalidation
264
Skizit

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("");
        };
    }
})

I Vanilla JavaScriptに変更 コメントの @ itpastorn で示唆されているように、Mootoolsからですが、必要に応じてMootoolsの同等の機能を使用できるはずです。

編集

setCustomValidityの動作が最初に答えたときに理解したものとは少し異なるため、ここでコードを更新しました。 setCustomValidityが空の文字列以外に設定されている場合、フィールドは無効と見なされます。したがって、有効性をテストする前にクリアする必要があります。単に設定して忘れることはできません。

さらに編集する

以下の@thomasvdbのコメントで指摘されているように、invalid以外のイベントではカスタムの有効性をクリアする必要があります。そうしないと、oninvalidハンドラーを介してそれをクリアするための余分なパスがあります。

233
robertc

これはHTML5のカスタムエラーメッセージを処理するためのコードです。

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

この部分は、ユーザーが新しいデータを入力したときにエラーメッセージを隠すので重要です。

    oninput="this.setCustomValidity('')"
204
Somnath Kadam

HTML5イベントoninvalidを使ってカスタムメッセージを制御するのはとても簡単です。

これがコードです：

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

これが最も重要です。

onvalid="this.setCustomValidity('')"
89
Ashwini Jain

注： これはChromeでは機能しません。他のブラウザではテストされません。下記の編集を参照してください。この答えは歴史的な参考のためにここに残されています。

検証文字列を実際にコードで設定するべきではないと思われる場合は、input要素のtitle属性に「このフィールドを空白のままにすることはできません」と設定できます。 （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の時点で、Chromeはtitle属性に関して何もしません。これがどのバージョンで変更されたのかはわかりません。

65
kzh

私はエラーメッセージの変更と翻訳を容易にするために小さなライブラリを作りました。 Chromeではtitle、Firefoxではx-moz-errormessageを使用して現在利用できないエラータイプでテキストを変更することさえできます。 GitHubでそれをチェックしてください 、そしてフィードバックをください。

それはのように使われます：

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

デモはjsFiddleにあります 。

36
hleinone

適切なタイミングでsetCustomValidityを設定および設定解除することで、検証メッセージは完璧に機能します。

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

私はonchangeの代わりにoninputを使用しました。これはより一般的なもので、JavaScriptを使用していても何らかの条件で値が変更された場合に発生します。

35
Salar

HTML5oninvalidイベントを利用してカスタムメッセージを制御するのはとても簡単です。

これがコードです：

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

これを試してみてください。

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/

20
Rikin Patel

これは非常に簡単な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('')">
11
Obaidul Haque

私が見つけた最も簡単で最もきれいな方法はあなたのカスタムエラーを保存するためにデータ属性を使うことです。ノードの妥当性をテストし、カスタムHTMLを使用してエラーを処理します。 enter image description here

ルジャバスクリプト

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>
10
Collin White

私はもっ​​とシンプルな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');
};
2
bernhardh

各シンボルの入力時に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>
1
Andrei Veshtard

さて、oninvalidはうまく機能しますが、ユーザーが有効なデータを入力してもエラーを表示します。それで私はそれに取り組むために以下を使いました。

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

1
Umesh Patil

フィールドに 'title'を付けるだけで簡単に処理できます。

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

JSXとReactに Salar の回答を適用すると、React Selectは検証に関して<input/>フィールドのようには動作しないことに気付きました。どうやら、カスタムメッセージだけを表示し、不便なときに表示されないようにするには、いくつかの回避策が必要です。

私は問題を提起しました here 、それが何かを助けているのであれば。 ここに は実用的な例を含む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}
      />
    );
  }
}
0
GuiRitter