validity.patternMismatchで入力フォームに数値以外が入力されていることを判定する(マルチブラウザ対応)
数値用フォームのバリデーションをフロント側で作成する際に調べた。マルチブラウザ対応の方法を見つけるのに思ったより苦労したので備忘録。
確認環境
- IE11 (11.0.90), Safari (12.0)含むモダンブラウザ
やりたいこと
- 数値以外の文字列も入力は許可する
- 入力値をバックエンドに送信する前にフロント側でバリデーションしたい
- 数値以外の文字列が含まれる場合はバリデーションエラー
コード
(例) 年齢入力用のフォームの場合
html
<input type="text" id="age" pattern="^(?!0)\d{0,3}$">
- pattern属性に正規表現を指定する。
- この例の場合では、先頭が0以外かつ数値のみで構成された長さ3以下の文字列にマッチする。
JavaScript
var input = document.getElementById("age"); if (input.validity.patternMismatch) { console.log("Bad input"); } else { console.log("Content of input ok."); }
- 入力がpattern属性値の正規表現にマッチしているかどうかを
validity.patternMismatchから取得できる。 - 以前はSafariが未対応だったようだが現在は問題ない模様。
- マルチブラウザ対応が必要な場合は
validity.patternMismatchが良い。
その他の方法
type="number"
<input type="number">
- type属性にnumberを指定するとChrome(70.0.3)では数値以外の入力を受け付けない。
- Chrome以外のブラウザでは数値以外も入力は可能。
- 多くのブラウザでは数値以外が入力されていることを
ValidityState.badInputから判定できる。- しかしIE11はbadInputプロパティに未対応のため判定できない。
JavaScriptで入力値を判定
- JavaScript内で正規表現を利用するか、入力値に対して型や文字列長等を使った条件式を組む方法。
- 条件式は正規表現に比べて冗長な上に間違いやすいのでやめたほうが良いと思う。
- 正規表現が静的な場合は素直にinput要素のpattern属性で判定すればいいと思うが、動的に生成する場合はどちらでも良さそう。
