結論：input type=numberは電話番号や郵便番号に使ってはいけないよという事。
やりたい事
- テキストボックスに全角文字、半角英字、「0」で始まる数値を入力できないようにする
- 「0」始まる数値が入力された時はvalidate.jsを使ってフォームを送信できないようにする
参考
input type=”number”の落とし穴 – “number”を使うと先頭の0が認識されない
https://plustrick.com/input_type_number/
validate.js
https://validatejs.org/
jQuery Validation 独自のルールを追加する
https://symfoware.blog.fc2.com/blog-entry-2354.html
HTML
input type=textで全半角英字・全角数字を入力できない関数をJsで作ってみたけど、テンキーで数字が入力できなかったり、tabキーを使えないなど、様々考慮する事があったので、ここは手っ取り早くinput type=numberを使う事にした。
<formid="form"><inputtype=numberid="number"name= "number"><!-- validate.jsでエラーにかかったらエラーメッセージを表示する --><pclass="number-err-msg"></p></form>スピンボタン（右のボタン）を消したければ以下をcssに追加しましょう
<!--Chrome、Safari-->input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}<!--Firefox、IE-->input[type="number"]{-moz-appearance:textfield;}Js
サーバーバリデーションもかけていますが、クライアントバリデーションもかけます。validate.jsの使い方は割愛します
$.validator.addMethod(onlyHalfnumber,function(value,element){if(this.optional(element)){returntrue;}<!--先頭が0にマッチする場合-->if(value==/^0/){returnfalse;}returntrue;},'先頭が0はダメですっ！！');}$("#form").validate({rules:{number:{onlyHalfNumber:true}}});これでバリデーション設定完了のはずが...
フォームが送信されて登録されてしまいました。原因が冒頭で書いたinput type=nemberですね。数字の先頭が「0」で始まっていると、「0」の部分は「無し」という認識に変わってしまうようです。
結論
input type=numberを使えば、整数以外の入力はできないので便利なのですが、先頭に「0」を付ける場合（電話番号など）type=textを大人しく使うかtype=telを使うのが良さそうですね。HTMLは悪意があればいくらでも書き換えられるのでサーバーバリデーションを設定するのをお忘れなく