質問

必須項目カスタムバリデーション

多くの入力フィールドを持つフォームがあります。html5のバリデーションを適用しています。

<input type="text" name="topicName" id="topicName" required />

このテキストボックスを埋めずにフォームを送信すると、次のようなデフォルトのメッセージが表示されます。

"Please fill out this field"

どなたかこのメッセージを編集するのを手伝っていただけませんか？

私はそれを編集するためにjavascriptのコードを持っていますが、それは動作しません。

$(document).ready(function() {
    var elements = document.getElementsByName("topicName");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter Room Topic Title");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

メールカスタムバリデーション

次のようなHTMLフォームがあります。

<form id="myform">
    <input id="email" name="email" type="email" />
    <input type="submit" />
</form>

バリデーションメッセージのようなものが欲しい。

必須項目です。 メールアドレスを入力してください。

電子メールが正しくありません。 '[email protected]' は有効な電子メール アドレスではありません。( ここで、入力されたメールアドレスはテキストボックスに表示されます )

私はこれを試しました。

function check(input) {  
    if(input.validity.typeMismatch){  
        input.setCustomValidity("'" + input.value + "' is not a Valid Email Address.");  
    }  
    else {  
        input.setCustomValidity("");  
    }                 
}  

この機能がうまく動作しません。 他に方法はないでしょうか？よろしくお願いします。

どのように解決するのですか？

コードスニペット

この回答は非常に注目されたので、私が考え出した素敵な設定可能なスニペットを紹介します。

/**
  * @author ComFreek <https://stackoverflow.com/users/603003/comfreek>
  * @link https://stackoverflow.com/a/16069817/603003
  * @license MIT 2013-2015 ComFreek
  * @license[dual licensed] CC BY-SA 3.0 2013-2015 ComFreek
  * You MUST retain this license header!
  */
(function (exports) {
    function valOrFunction(val, ctx, args) {
        if (typeof val == "function") {
            return val.apply(ctx, args);
        } else {
            return val;
        }
    }

    function InvalidInputHelper(input, options) {
        input.setCustomValidity(valOrFunction(options.defaultText, window, [input]));

        function changeOrInput() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
                input.setCustomValidity("");
            }
        }

        function invalid() {
            if (input.value == "") {
                input.setCustomValidity(valOrFunction(options.emptyText, window, [input]));
            } else {
               input.setCustomValidity(valOrFunction(options.invalidText, window, [input]));
            }
        }

        input.addEventListener("change", changeOrInput);
        input.addEventListener("input", changeOrInput);
        input.addEventListener("invalid", invalid);
    }
    exports.InvalidInputHelper = InvalidInputHelper;
})(window);

使用方法

→ jsFiddle

<input id="email" type="email" required="required" />

InvalidInputHelper(document.getElementById("email"), {
  defaultText: "Please enter an email address!",

  emptyText: "Please enter an email address!",

  invalidText: function (input) {
    return 'The email address "' + input.value + '" is invalid!';
  }
});

詳細

• defaultText が初期表示されます
• emptyText は入力が空の時（クリアされた時）に表示されます。
• invalidText は、入力がブラウザによって無効とマークされたときに表示されます（たとえば、有効な電子メールアドレスではない場合など）。

3つのプロパティには、それぞれ文字列か関数を割り当てることができます。

関数を割り当てた場合、入力要素（DOMノード）への参照を受け取ることができ、それに対して が必要です。 はエラーメッセージとして表示される文字列を返します。

互換性

でテストされています。

• Chrome Canary 47.0.2
• IE 11
• Microsoft Edge（2015/08/28時点の最新版使用）
• Firefox 40.0.3
• オペラ 31.0

古い回答

古いリビジョンはこちらでご覧いただけます。 https://stackoverflow.com/revisions/16069817/6