郵便番号のエラーチェックと住所の自動入力を行いたいのですが、kintone promiseがうまく動作しません。
https://developer.cybozu.io/hc/ja/articles/202166320-%E5%A4%96%E9%83%A8API%E3%81%AE%E5%AE%9F%E8%A1%8Cl
こちらの記事を参考に「郵便番号の桁数チェックと郵便番号が間違っていないかのチェック」と郵便番号が入力されていた場合は「住所の自動入力」を実現したいと考えております。
kintone proxyのPromiseを使用した記述をしていてもkintone proxy内の処理を待たずに「if (!(zip_value.match(zip_pattern)))」のelseまで動作がジャンプします。
下記コードで、どこか間違っていたり勘違いしているところがありますでしょうか？
よろしくお願い致します。
//郵便番号の入力チェック
function zipCheck(event) {
// 郵便番号の定義(7桁の半角数字)
var zip_pattern = /^\d{7}$/;
// event よりレコード情報を取得します
var rec = event['record'];
//エラーの初期化
rec['zipcode']['error'] = null;
// 郵便番号が入力されていたら、入力値を確認します
var zip_value = rec['zipcode']['value'];
if (zip_value) {
if (zip_value.length > 0) {
// 定義したパターンにマッチするか確認します
if (!(zip_value.match(zip_pattern))) {
// マッチしない場合は、郵便番号フィールドにエラーの内容を表示するようにします
rec['zipcode']['error'] = '7桁の半角数字で入力して下さい';
}else{
var url = 'https://zip-cloud.appspot.com/api/search?zipcode=' + zip_value;
kintone.proxy(url, 'GET', {}, {}).then(function(args) {
var record = kintone.app.record.get();
//success
if(JSON.parse(args[0])['results'] !== null){
var results = JSON.parse(args[0])['results'][0];
record['fullAddress'].value = results['address1'] + results['address2'] + results['address3'];
kintone.app.record.set(record);
}else{
rec['zipcode']['error'] = '郵便番号が間違っています。';
}
} ,function(error) {
console.log(error);
});
}
}
}
}
zipCheckの呼び出し元がわかりませんが、changeイベントで呼び出しているという想定の場合、
Promiseの処理に入ったあと値をセットする場合には、
kintone.app.record.get、kintone.app.record.setでセットする必要があります。
Promiseの処理に入らない場合は、event.recordに設定し、changeイベントでeventをreturnします。
その辺りを整理すると、以下のようなイメージになると思われます。
kintone.events.on(["app.record.create.change.zipcode", "app.record.edit.change.zipcode", "app.record.index.edit.change.zipcode"], function (event) {
return zipCheck(event);
});
//郵便番号の入力チェック
function zipCheck(event) {
// 郵便番号の定義(7桁の半角数字)
var zip_pattern = /^\d{7}$/;
// event よりレコード情報を取得します
var rec = event['record'];
//エラーの初期化
rec['zipcode']['error'] = null;
// 郵便番号が入力されていたら、入力値を確認します
var zip_value = rec['zipcode']['value'];
if (zip_value) {
if (zip_value.length > 0) {
// 定義したパターンにマッチするか確認します
if (!(zip_value.match(zip_pattern))) {
// マッチしない場合は、郵便番号フィールドにエラーの内容を表示するようにします
rec['zipcode']['error'] = '7桁の半角数字で入力して下さい';
} else {
var url = 'https://zip-cloud.appspot.com/api/search?zipcode=' + zip_value;
kintone.proxy(url, 'GET', {}, {}).then(function (args) {
var record = kintone.app.record.get();
//success
if (JSON.parse(args[0])['results'] !== null) {
var results = JSON.parse(args[0])['results'][0];
record.record['fullAddress'].value = results['address1'] + results['address2'] + results['address3'];
} else {
record.record['zipcode']['error'] = '郵便番号が間違っています。';
}
kintone.app.record.set(record);
}).catch(function (error) {
console.log(error);
});
}
}
}
return event;
}
changeイベント以外から呼び出す場合は、
全てevent.recordに値を設定後、
return kintone.proxy( …
のように、Promise自体をreturnすることで、処理を待ってくれます。
早々にコメントいただきありがとうございます！
おっしゃるようにチェンジイベントでの呼び出しとなります。
上記の内容で変更したところなぜかチェンジイベントがうまく動いておらずデバックをしてもエラーが出ず、
ブレークポイントを設定しても全く引っかかりません。
住所以外にもチェックを行っているのですが、今まで住所のみが動かず他のものはエラーチェックできていたのですが、
上記に変更したところ住所のエラーチェックが出た代わりに全てのチェンジイベントが動かない状況になりました。
submitのイベントは動いております。
デバックでは出てこないため何がおかしいのかわかりません。
何か考えられる原因はございますでしょうか？
//電話番号の入力チェック
function telCheck(event) {
console.log(event);
// TELの定義(10桁または 11桁の半角数字)
var tel_pattern = /^\d{11}$/;//携帯番号
var tel_pattern02 = /^\d{10}$/;//固定電話
// event よりレコード情報を取得します
var rec = event['record'];
//エラーの初期化
rec.tel['error'] = null;
// TEL が入力されていたら、入力値を確認します
var tel_090 = '090';
var tel_080 = '080';
var tel_value = rec.tel['value'];
if (tel_value) {
if (tel_value.length > 0) {
// 定義したパターンにマッチするか確認します
if (tel_value.indexOf(tel_090) === 0 && !(tel_value.match(tel_pattern))) {//携帯番号の場合11桁かのチェック
// マッチしない場合は、TEL に対してエラーの内容を記載します
rec.tel['error'] = '10桁 または 11桁の半角数字で入力して下さい';
}else if(tel_value.indexOf(tel_080) === 0 && !(tel_value.match(tel_pattern))){
rec.tel['error'] = '10桁 または 11桁の半角数字で入力して下さい';
}else if(tel_value.indexOf(tel_080) === -1 && tel_value.indexOf(tel_090) === -1 && !(tel_value.match(tel_pattern02))){
rec.tel['error'] = '10桁 または 11桁の半角数字で入力して下さい';
}
}
}
}
//電話番号02の入力チェック
function telCheck02(event) {
// TELの定義(10桁または 11桁の半角数字)
var tel_pattern = /^\d{11}$/;//携帯番号
var tel_pattern02 = /^\d{10}$/;//固定電話
// event よりレコード情報を取得します
var rec = event['record'];
//エラーの初期化
rec.電話番号02['error'] = null;
// TEL が入力されていたら、入力値を確認します
var tel_090 = '090';
var tel_080 = '080';
var tel_value02 = rec.電話番号02['value'];
if (tel_value02) {
if (tel_value02.length > 0) {
// 定義したパターンにマッチするか確認します
if (tel_value02.indexOf(tel_090) === 0 && !(tel_value02.match(tel_pattern))) {
// マッチしない場合は、TEL に対してエラーの内容を記載します
rec.電話番号02['error'] = '10桁 または 11桁の半角数字で入力して下さい';
}else if(tel_value02.indexOf(tel_080) === 0 && !(tel_value02.match(tel_pattern))){
rec.電話番号02['error'] = '10桁 または 11桁の半角数字で入力して下さい';
}else if(tel_value.indexOf(tel_080) === -1 && tel_value.indexOf(tel_090) === -1 && !(tel_value02.match(tel_pattern02))){
rec.電話番号02['error'] = '10桁 または 11桁の半角数字で入力して下さい';
}
}
}
}
//メールアドレスの入力チェック
function mailCheck(event) {
// メールアドレスの定義 (簡易的な定義です。さらに詳細に定義する場合は下記の値を変更して下さい)
var mail_pattern = /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/;
// event よりレコード情報を取得します
var rec = event['record'];
//エラーの初期化
rec.お客様メールアドレス['error'] = null;
// メールアドレスが入力されていたら、入力値を確認します
var mail_value = rec.お客様メールアドレス['value'];
if (mail_value) {
if (mail_value.length > 0) {
// 定義したパターンにマッチするか確認します
if (!(mail_value.match(mail_pattern))) {
// マッチしない場合は、メールアドレスに対してエラーの内容を記載します
rec.お客様メールアドレス['error'] = 'メールアドレスとして認識されませんでした。値を確認して下さい。';
}
}
}
}
//郵便番号の入力チェック
function zipCheck(event) {
// 郵便番号の定義(7桁の半角数字)
var zip_pattern = /^\d{7}$/;
// event よりレコード情報を取得します
var rec = event['record'];
//エラーの初期化
rec.zipcode['error'] = null;
// 郵便番号が入力されていたら、入力値を確認します
var zip_value = rec.zipcode['value'];
if (zip_value) {
if (zip_value.length > 0) {
// 定義したパターンにマッチするか確認します
if (!(zip_value.match(zip_pattern))) {
// マッチしない場合は、郵便番号フィールドにエラーの内容を表示するようにします
rec.zipcode['error'] = '7桁の半角数字で入力して下さい';
}else{
var url = 'https://zip-cloud.appspot.com/api/search?zipcode=' + zip_value;
kintone.proxy(url, 'GET', {}, {}).then(function(args) {
var record = kintone.app.record.get();
console.log(record);
//success
if(JSON.parse(args[0])['results'] !== null){
var results = JSON.parse(args[0])['results'][0];
record.record['fullAddress'].value = results['address1'] + results['address2'] + results['address3'];
}else{
record.record.zipcode['error'] = '郵便番号が間違っています。';
}
kintone.app.record.set(record);
} ,function(error) {
console.log(error);
});
}
}
}
}
//変更イベント（郵便番号)
kintone.events.on(['app.record.create.change.zipcode',
'app.record.edit.change.zipcode',
'app.record.index.edit.change.zipcode'], function(event) {
zipCheck(event);
return event;
});
//変更イベント(電話番号)
kintone.events.on(['app.record.create.change.tel',
'app.record.edit.change.tel',
'app.record.index.edit.change.tel'], function(event) {
telCheck(event);
return event;
});
//変更イベント(電話番号02)
kintone.events.on(['app.record.create.change.電話番号02',
'app.record.edit.change.電話番号02',
'app.record.index.edit.change.電話番号02'], function(event) {
telCheck02(event);
return event;
});
//変更イベント(メールアドレス)
kintone.events.on(['app.record.create.change.お客様メールアドレス',
'app.record.edit.change.お客様メールアドレス',
'app.record.index.edit.change.お客様メールアドレス'], function(event) {
mailCheck(event);
return event;
});
//保存前イベント
kintone.events.on(['app.record.create.submit',
'app.record.edit.submit',
'app.record.index.edit.submit'], function(event) {
zipCheck(event);
telCheck(event);
telCheck02(event);
mailCheck(event);
return event;
});
こちらの環境にそのままコピペして試したのですが、動いてそうに見えました。
（}else if(tel_value.indexOf(tel_080) === -1 && tel_value.indexOf(tel_090) === -1 && !(tel_value02.match(tel_pattern02))){の行が、変数が無いエラーにはなりますが。）
貼った部分のソースだけにしても動かないですか？
思っていた挙動と違う理由がやっとわかりました。
電話番号とメールアドレスをリンクで作成していたためチェンジイベントが発動しないようでした。
リンクでもチェンジイベントが発動すると思っていたのでエラーも出ませんでした。
保存時のみのエラーチェックとして使用します。
本当にありがとうございました。