inputのrequiredのメッセージの変更方法やFirefoxの挙動への対応

inputにrequiredを指定した時に出るメッセージ「このフィールドは入力必須です。」を変更することになってネットで調べつつ実装していたのですが、Firefoxだけちょっと動作がおかしくて詰まってしまったのでメモとして残しておきます。

実装
改善版実装

実装

実装としては

jQuery(document).ready(function($){
    $("input").each(function(index, element) {

        element.addEventListener("invalid", function(e) {
            if(element.validity.valueMissing){
                e.target.setCustomValidity("この項目は入力必須です。");
            } else {
                e.target.setCustomValidity("");
            }
        });
    });
});

という風にバリデーションでエラーが出ている時にinvalidのイベントが発生しているinputで入力が空の時にメッセージを「この項目は入力必須です。」というものです。

エラー発生後かつ入力がある場合はe.target.setCustomValidity(“”);でエラーが無い扱いにしてメッセージを出しません。

ChromeやIEでは問題なく動作していたのですがFirefoxだけ少し挙動が違いました。

エラーが発生しない場合などは問題ないのですが、一度エラーを発生させた後正しく入力した場合に空のエラーメッセージが表示されてしまいます。

Firefoxのrequired通常エラー

Firefoxのrequiredエラー(異常)

通常であれば左の画像のようにエラーが表示されますが、先程の条件の方法で入力するとFirefoxだけ空のエラーの吹き出しが表示されてしまいます。

他のブラウザであればメッセージは表示されないので結構困りました。

改善版実装

結構急いでいたので他のブラウザに影響がなく、Firefoxで改善されるように対応策を探しました。

辿り着いたのはエラーが無い時にアクション自体をキャンセルさせる方法です。

jQuery(document).ready(function($){
    $("input").each(function(index, element) {

        element.addEventListener("invalid", function(e) {
            if(element.validity.valueMissing){
                e.target.setCustomValidity("この項目は入力必須です。");
            } else {
                e.target.setCustomValidity("");
                e.preventDefault();
            }
        });
    });
});

e.preventDefault();とすることでinvalidのアクションをキャンセルするようにしました。

実際この方法が正しいか？というのは微妙ですが暫定的には対応出来ているのでメモしておこうと思います。

そもそもエラー表示後に入力すると正しい場合でもinvalidが着火されるのは何故なのでしょう・・・