住所変換機で問題発生!
次のように、「ハイフンはあってもなくてもOK。」とハイフンの入力を許容しているのに、ハイフン入りの郵便番号を入力するとエラーが発生した。
まっさきに疑ったのが、郵便番号のバリデーションをする「validatePostalCode」関数だ。
/**
* 正しい郵便番号フォーマット(7桁の数字)であるかをチェック
*
* @param {string} postalCode - チェックする郵便番号
* @return {boolean} 7桁の数字ならtrue、でなければfalseを返す
*/
function validatePostalCode(postalCode) {
postalCode = postalCode.replace(/-/g, ''); // ハイフンを除去
return /^\d{7}$/.test(postalCode);
}
ここでTrueを返していなければ、上記のエラーになるはずだが、テストしたところちゃんとTrueを返している。この関数に問題がない。
さらに調べていくうちに、原因を見つけることができた。
// 郵便番号の入力を検証し、日本語住所を表示
function validatePostalCodeAndUpdateAddress() {
clearFieldsExceptPostalCode(); // すべての内容をクリアする
// エラーメッセージも全てクリアする???ラッピングする!
displayError('', 'block_lot');
displayError('', 'building');
displayError('', 'room');
let postalCode = document.getElementById('postal_code').value;
if (checkPostalCodeInput(postalCode)) { // 郵便番号の入力の有無をチェック
if (validatePostalCode(postalCode)) { // 郵便番号のフォーマットをチェック
displayError('', 'postal_code') // 正の場合は(あるかどうかにかかわらず)エラーメッセージを非表示
// 住所を取得し、日本語の住所を組み立てる
getAddressFromPostalCode(postalCode).then(address => {
validatePostalCodeAndUpdateAddressというこれから整理する関数だが、これの14行目にvalidatePostalCodeがあり、trueを返している。
その場合コードが下に流れていき、19行目で郵便番号で住所を取得することになっている。これを担うのがgetAddressFromPostalCode関数だが、それに渡されている引数postalCodeは、10行目で取得されたけど、ハイフン未除去だということに気がついた。
そこでpostalCodeを取得した時点でハイフン除去処理をするように修正した。
let postalCode = document.getElementById('postal_code').value.replace(/-/g, '');
ここでハイフン除去をしたならば、もうvalidatePostalCode内でそれをする必要がないので、該当部分を削除し、以下のようにした。
/**
* 正しい郵便番号フォーマット(7桁の数字)であるかをチェック
*
* @param {string} postalCode - チェックする郵便番号
* @return {boolean} 7桁の数字ならtrue、でなければfalseを返す
*/
function validatePostalCode(postalCode) {
return /^\d{7}$/.test(postalCode);
}
validatePostalCodeについては、次の記事に詳しい。
今回の問題を解決するのにもChatGPTの世話になったが、途中経過が乱雑すぎるので割愛する。
しかし今回のことでページの値を取得する時に、取得した時点で必要な加工をし、以後ずっとそれを使うほうが問題が起こりにくいと感がじたので、賛同を得るためにChatGPTに聞いてみた。
コードも修正してくれたが、私がしたのと変わらないので割愛する。回答の最初と最後だけを上記の通り掲載する。
「正しい認識に至ったと思います」って、なんだか嬉しい。調子に乗って褒めてもらうことにした。
今回は以上だ。