郵便番号の「0012345」を数値として保存すると、先頭の0を失う場合があります。郵便番号や社員番号は数字で書かれていても、足し算をする値ではありません。HTMLフォームでも、文字列の識別子として受け取ります。
type="number"は、数値を増減させる入力に向いています。郵便番号ならtype="text"にし、inputmode="numeric"で数字用の入力方法を示す組み合わせを検討できます。表示するキーボードの種類と、入力値の型を分けて考えます。
7桁の文字列として確認する
次はハイフンなしの半角数字7桁を受け付ける練習用フォームです。日本の郵便番号を入力する条件として使い、番号が実在するかの検索は行いません。
<label for="postal-code">郵便番号</label>
<input id="postal-code" name="postalCode" type="text"
inputmode="numeric" autocomplete="postal-code"
pattern="[0-9]{7}" maxlength="7" required
aria-describedby="postal-hint">
<p id="postal-hint">ハイフンなしの半角数字7桁。先頭の0も入力してください。</p>
<button id="check-postal" type="button">入力を確認する</button>
<p id="postal-result" role="status"></p>
<script>
const postal = document.getElementById('postal-code');
const result = document.getElementById('postal-result');
document.getElementById('check-postal').addEventListener('click', () => {
result.textContent = '';
if (!postal.reportValidity()) return;
const payload = {postalCode: postal.value};
result.textContent = JSON.stringify(payload) + '。まだ保存していません。';
});
</script>
「0012345」を入れて確認すると、{"postalCode":"0012345"}という表示になります。JSONの値が引用符で囲まれた文字列になっていることと、0が二つ残ることを確かめます。画面の表示だけでなく、サーバーへ渡す段階でも文字列のまま扱うことが必要です。
inputmodeは入力を制限しない
inputmodeは、端末にどの入力方法が向いているかを示すものです。数字以外を入力できなくする機能ではありません。この例ではpatternで半角数字7桁、requiredで空欄を検査します。
maxlengthも、外部からのデータが必ず7文字になる保証ではありません。ブラウザのHTMLやJavaScriptは変更できるため、保存を追加する場合はサーバーでも同じ条件を確認します。保存先の列も数値へ自動変換されないようにしてください。
補正するかを先に決める
ハイフン、全角数字、前後の空白を受け付けたい場合は、どこまで補正するかを決めます。この例は勝手に0を足したり、全角文字を半角に変えたりしません。少ない桁を0で埋めると、誤入力した別の番号を正しい形式に見せる場合があるためです。
社員番号へ応用するなら、桁数や使える文字は、その組織のルールへ合わせます。郵便番号と同じ7桁にする根拠はありません。数字だけの識別子と、数量や金額のような計算する値を区別してください。
エラー後の表示も見直す
前回の入力が正常でも、その後に値を変えて確認したら不正になる場合があります。サンプルは確認のたびに結果欄を消し、前回の成功表示を残さない形です。正常値、不正値、修正した値の順に試すと、古い表示の残りに気づけます。
ブラウザでの確認は入力形式までです。実在する番号か、住所と一致するか、申請者が入力してよい内容かは別の検査になります。先頭ゼロを保つ形式ができたら、受け渡しと保存後の読み戻しでも同じ文字列が残るかを確認します。
関連する記事
GASでスプレッドシートを読み書きする基本｜セル・行・範囲の扱い方
