Q&A
「もし"-"が場合は再入力をするように促す」→「が必要な場合」？？
Javascriptで登録フォームを作成しようとしておりまして、11桁の電話番号の箇所に"-"が入力されているかどうかをチェックして、もし"-"が場合は再入力をするように促すフォームを作りたいのですが、これをチェックするために参考となるコードはあるでしょうか？
差支えない範囲で教えて頂けたら有り難く存じます。
回答3件
0
再入力を促すというUIはまったくおすすめしません。
ハイフンを除去することは機械的にできることですから、だったらプログラムが機械的に除去すべきでありユーザーに負担をかけるべきではありませんので。
placeholoder属性でハイフンなしの見本は示しつつ、pattern属性では数字・ハイフン・括弧を許容し、サーバー側で、もしくは加えてonchangeのタイミングでハイフン・括弧の除去を行うというのがあるべきUIになります。
これは、フリガナの平仮名・片仮名、全角・半角という書式の制限をかけるときにも同じことが言えます。
投稿2016/11/16 02:31
総合スコア5570
0
ベストアンサー
"-" をユーザーに入力を求めるのは、ユーザービリティの観点から、お勧めしません。
というのも、"-" には、見た目がほぼ同じだが、似ているものが多いためです。
-
- （半角英字ハイフン）
- ー（ひらがな長音記号）
- ー（カタカナ長音記号）
- 一（漢数字のイチ）
- ─（罫線の記号）
それならば、むしろ
html
1<input type="text" name="tel[]"> 2- 3<input type="text" name="tel[]"> 4- 5<input type="text" name="tel[]">
の方が間違いが起こりにくいはずです。
数字のみの入力に限るのであれば、
/[\d]{10,11}/
のような正規表現パターンでチェックすれば良いのでは？
投稿2016/11/15 20:03
編集2016/11/15 20:44退会済みユーザー
総合スコア0
0
チェック処理とエラーを出したいということであれば、
<input type="tel">とpattern属性を使うとユーザビリティ的にもよいと思います。
jsでないのと、ブラウザをどこまで対応するかにもよってしまいますが…。
html
1<input type="tel" pattern="^[0-9]{9,11}+$">
- input type="tel"を使用するとスマホで表示した際に、ソフトウェアキーボードが自動で数字入力に切り替わり、ユーザが切り替える手間がなくなります。
- pattern属性は正規表現を含めることができ、対応しているブラウザであれば、form送信前に正規表現でチェックをし、エラーを表示することができます。
また、placeholder属性を使用してハイフンなしの入力例を記載しておくと良いと思います。
投稿2016/11/16 02:24
総合スコア911
あなたの回答
tips
プレビュー
