inputのtype/pattern属性とsetCustomValidityを使ってバリデーションし独自のエラーメッセージを表示する

最近、「やばいもう2年目が終わるのに、私何もできるようになってないよォォオ」とむせび泣く夜が続いています。まみたすです。

本題とはあんまり関係ないんですけど、AWS認定ソリューションアーキテクトをとろうかと思っています。
どうもサーバーの方は苦手意識があってあまり深堀していないのですが、AWSはこれから絶対に必要だし素敵な技術だし「苦手はぜんぶ、伸びしろだ」って電車の広告に書いてあったので、伸びしろ伸ばしに行こうと思います。

待ってろ伸びしろ。

 

inputのpattern属性を使ってフォームの値をチェックし独自のエラーメッセージを表示する

長い。

今回は、毎度毎度JS触ってて詰まってしまう超初級ミスをまたもや犯したので、戒めの気持ちを込めて書きます。

今回の要望は「フォームに半角数字しか入らないように値をチェックして、不正な値だったときに独自のエラーメッセージを表示したい。」
きっとプロなら3秒仕事…
最初はtype属性だけで対応したのですが、「出てくるエラーメッセージが『値が不正です』みたいな感じで抽象的」という理由で「半角数字で入力してください」という内容のメッセージを出すことにしました。

 

1.まずはフォーム作成

何の変哲もないフォームです。
例として郵便番号にします。
※スマホで見たときのことを考えると、type=telにしておくと数字キーボードが開くので良い感じです。textでも可。
半角数字とハイフンのみ通したいので、patternには^[0-9-]+$を指定。

郵便番号: <input name="zipcode" pattern="^[0-9-]+$" type="tel" />

 

2.JavaScript作成

別にJSでもjQueryでもどちらでもよかったのですが、久々にJavaScriptさーわろっという気持ち(地獄の始まり)

  • 1.まずはバリデーションを適用させたいとこの要素を取得
  • 2.バリデーションチェック
  • 3.エラーだったらエラーメッセージを返す
  • 4.エラーじゃなかったら何も返さない

1.まずはバリデーションを適用させたいとこの要素を取得

カンタンカンタン。

nameを”zipcode”で振ったので、
zipcode = document.getElementsByname(“zipcode”);
だな。

2.バリデーションチェックとエラーメッセージ

バリデーションからエラーメッセージの処理は今回はcheckValidityとsetCustomValidityというメソッドを採用。

checkValidityでinputの各要素を検証して、
setCustomValidityで任意のメッセージを返します。

checkValidityは値が不正だったらfalseを、適正であればtrueを返します。
setCustomValidityは引数を空で渡さないとエラーを解除できません。
今回はフォームのsubmitボタンを押したらファンクションを実行するようにしたので、
ファンクションを実行するときに最初に空判定を入れてあげるようにしました。

<script>
 function checkValidation(){

        zipcode = document.getElementsByname("zipcode");

       /* 2度目3度目の可能性を考えて一度エラーを解除 */
        zipcode.setCustomValidity("");

      /* バリデーションチェック */  
        if(tel.checkValidity() === false){
            /* エラーがあるとき */
            zipcode.setCustomValidity("郵便番号は半角数字とハイフンのみ使用できます。");
            return false;
        }else{
            /* エラーがないとき */
            tel.setCustomValidity("");
            return true;
        }
    }
</script>

よしっ
これで行けるっしょ!実行。

できない…

きっとまともに勉強している人ならすぐ気づくと思うのですが、
zipcode = document.getElementsByname(“zipcode”);
は、配列が返ってきます。
“getElements“ですからね。
当てはまるもの全部取ってくるで!という良い動きをするので、配列が返ってくるのです…。
一つだけ取得したいときはidを振ってあげてidで取得すること!!!!
それを忘れた私、怒られつつ教えてもらいつつ修正(自戒)。

inputにidを振って、ファンクション実行のボタンもつけた結果

※form属性のところはちょっと適当です



<form action="hoge" name="hogehoge">郵便番号: <input id="zipcode" name="zipcode" pattern="^[0-9-]+$" type="tel" /><input type="submit" value="Request" />

</form><script>
 function checkValidation(){

        zipcode = document.getElementById("zipcode");

       /* 2度目3度目の可能性を考えて一度エラーを解除 */
        zipcode.setCustomValidity("");

      /* バリデーションチェック */  
        if(tel.checkValidity() === false){
            /* エラーがあるとき */
            zipcode.setCustomValidity("郵便番号は半角数字とハイフンのみ使用できます。");
            return false;
        }else{
            /* エラーがないとき */
            tel.setCustomValidity("");
            return true;
        }
    }
</script>

完成!

もうJavaScript超入門からやったほうがいいかも。
毎回あほみたいなことで躓いている気がします。の、伸びしろ!

 

ところで、このブログコード書いたときのデザインがくそほどダサいのでなんとかします。

The following two tabs change content below.
まみたす

まみたす

1992年生まれ。知識ゼロ文系女子からSEになっているところ。 カメラ、猫、お酒、旅行がすきです。
この記事の内容が役に立ったと思ったら、SNSで記事を共有してもらえると幸いです。

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)