【jQuery】validate.jsを使ってクライアントバリデーションを設定してHTMLで躓いた話

結論：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を使う事にした。

<form id="form">
  <input type=number id="number" name= "number">
  <!-- validate.jsでエラーにかかったらエラーメッセージを表示する -->
  <p class="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 ) ) {
        return true;
    }
        <!-- 先頭が0にマッチする場合 -->
        if (value == /^0/) {
            return false;
        }
        return true;
    }, '先頭が0はダメですっ！！');
}

    $("#form").validate({
        rules: {
            number: {
                onlyHalfNumber: true
            }
        }
    });

これでバリデーション設定完了のはずが...

フォームが送信されて登録されてしまいました。原因が冒頭で書いたinput type=nemberですね。数字の先頭が「0」で始まっていると、「0」の部分は「無し」という認識に変わってしまうようです。

結論

input type=numberを使えば、整数以外の入力はできないので便利なのですが、先頭に「0」を付ける場合（電話番号など）type=textを大人しく使うかtype=telを使うのが良さそうですね。HTMLは悪意があればいくらでも書き換えられるのでサーバーバリデーションを設定するのをお忘れなく

終わり