120

必須フィールドのカスタム検証

多くの入力フィールドを持つ 1 つのフォームがあります。私は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>


私が好きな検証メッセージ。

必須フィールド:電子メール アドレスを入力してください
間違った電子メール:「testing@.com」は有効な電子メール アドレスではありません。（ここでは、テキストボックスに表示された入力したメールアドレス）

私はこれを試しました。

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

この機能が正常に動作していません。他に方法はありますか? ありがたいです。

4

11 に答える 11

119

コードスニペット

この回答は非常に注目を集めたので、私が思いついた設定可能なスニペットを次に示します。

/**
  * @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);

使用法

→ jsフィドル

<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 ノード) への参照を受け入れることができ、エラー メッセージとして表示される文字列を返す必要があります。

互換性

テスト済み:

  • クロム カナリア 47.0.2
  • IE11
  • Microsoft Edge (2015 年 8 月 28 日現在の最新バージョンを使用)
  • Firefox 40.0.3
  • オペラ 31.0

古い答え

ここで古いリビジョンを確認できます: https://stackoverflow.com/revisions/16069817/6

于 2013-04-17T20:37:14.673 に答える
66

oninvalid 属性を使用してこれを簡単に実現できます。このデモ コードをチェックしてください。

<form>
<input type="email" pattern="[^@]*@[^@]" required oninvalid="this.setCustomValidity('Put  here custom message')"/>
<input type="submit"/>
</form>

ここに画像の説明を入力

Codepen デモ: https://codepen.io/akshaykhale1992/pen/yLNvOqP

于 2015-07-03T11:23:53.553 に答える
21

HTML:

<form id="myform">
    <input id="email" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  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/

于 2014-03-09T17:58:15.353 に答える
16

これを試して：

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

これを Chrome と FF でテストしたところ、両方のブラウザで動作しました。

于 2012-12-10T09:58:08.077 に答える
8

私は HTML 5 でそれをやったことがありませんが、やってみます。このフィドルを見てください。

jQuery、HTML5 のネイティブ イベントとプロパティ、および入力タグのカスタム属性を使用しました (コードを検証しようとすると、問題が発生する可能性があります)。すべてのブラウザでテストしたわけではありませんが、うまくいくと思います。

これは、jQuery を使用したフィールド検証 JavaScript コードです。

$(document).ready(function()
{
    $('input[required], input[required="required"]').each(function(i, e)
    {
        e.oninput = function(el)
        {
            el.target.setCustomValidity("");

            if (el.target.type == "email")
            {
                if (el.target.validity.patternMismatch)
                {
                    el.target.setCustomValidity("E-mail format invalid.");

                    if (el.target.validity.typeMismatch)
                    {
                         el.target.setCustomValidity("An e-mail address must be given.");
                    }
                }
            }
        };

        e.oninvalid = function(el)
        {
            el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
        };
    });
});

良い。単純なフォーム html は次のとおりです。

<form method="post" action="" id="validation">
    <input type="text" id="name" name="name" required="required" requiredmessage="Name is required." />
    <input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" />

    <input type="submit" value="Send it!" />
</form>

属性requiredmessageは、先ほど説明したカスタム属性です。必要なフィールドごとにメッセージを設定できます。これにより、jQuery はエラー メッセージを表示するときにそこから取得します。JavaScript で各フィールドを正しく設定する必要はありません。jQuery が自動的に行います。その正規表現は問題ないようです（少なくとも、あなたのtesting@.com! haha​​ をブロックします）

フィドルでわかるように、送信フォーム イベントの追加の検証を行います (これは document.ready にも適用されます)。

$("#validation").on("submit", function(e)
{
    for (var i = 0; i < e.target.length; i++)
    {
        if (!e.target[i].validity.valid)
        {
            window.alert(e.target.attributes.requiredmessage.value);
            e.target.focus();
            return false;
        }
    }
});

とにかくこれがうまくいくか、あなたを助けることを願っています。

于 2013-05-31T17:51:13.390 に答える
5

すべての入力タグで属性「タイトル」を使用し、それにメッセージを書き込みます

于 2014-07-25T23:52:41.037 に答える
5

必要に応じて、同じタイプのすべての入力または 1 つの入力に対して「無効」のイベント リスナーを設定してから、適切なメッセージを設定することで、これを行うことができます。

[].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
    emailElement.addEventListener('invalid', function() {
        var message = this.value + 'is not a valid email address';
        emailElement.setCustomValidity(message)
    }, false);

    emailElement.addEventListener('input', function() {
        try{emailElement.setCustomValidity('')}catch(e){}
    }, false);
    });

スクリプトの 2 番目の部分である有効性メッセージはリセットされます。そうしないとフォームを送信できないためです。たとえば、これにより、電子メール アドレスが修正された場合でもメッセージがトリガーされなくなります。

また、入力の入力を開始すると「無効」がトリガーされるため、必要に応じて入力フィールドを設定する必要はありません。

ここにそのためのフィドルがあり ます：http: //jsfiddle.net/napy84/U4pB7/2/

于 2013-05-31T23:33:46.947 に答える
4

要素を取得して setCustomValidity メソッドを使用するだけです。

例

var foo = document.getElementById('foo');
foo.setCustomValidity(' An error occurred');
于 2014-05-05T21:38:48.143 に答える
3

oninvalid="属性を使用するだけで、 this.setCustomValidity() eventListener をバインドできます。

これが私のデモコードです! (実行してチェックアウトできます!) ここに画像の説明を入力

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oninvalid</title>
</head>
<body>
    <form action="https://www.google.com.hk/webhp?#safe=strict&q=" method="post" >
        <input type="email" placeholder="xgqfrms@email.xyz" required="" autocomplete="" autofocus="" oninvalid="this.setCustomValidity(`This is a customlised invalid warning info!`)">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

参照リンク

http://caniuse.com/#feat=フォーム検証

https://www.w3.org/TR/html51/sec-forms.html#sec-constraint-validation

于 2016-12-20T10:10:31.167 に答える
1

このスクリプトを追加して、独自のメッセージを表示できます。

 <script>
     input = document.getElementById("topicName");

            input.addEventListener('invalid', function (e) {
                if(input.validity.valueMissing)
                {
                    e.target.setCustomValidity("Please enter topic name");
                }
//To Remove the sticky error message at end write


            input.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        });

</script>

パターンの不一致などの他の検証については、if else 条件を追加できます

お気に入り

else if (input.validity.patternMismatch) 
{
  e.target.setCustomValidity("Your Message");
}

rangeOverflow、rangeUnderflow、stepMismatch、typeMismatch、valid などの他の有効条件があります。

于 2017-01-11T06:03:11.737 に答える