いつもお世話になっております。
以前にも似たようなご質問をしたのですが、未だあまり理解できず再度のご質問となり大変恐れ入ります。
文字列に正規表現を使用し、入力された内容をchangeイベントにて一致しなければ、ポップアップではなくフィールドの下に表示される即時エラーで表示したいです。
・半角数字のみ（頭に0がつく番号の入力があるため文字列を希望）
・半角英数字のみ
いくつかトライしてみましたが特にデバッグなどでエラーも出ないため、ご教示いただけませんでしょうか。宜しくお願い致します。
(function() {
'use strict';
function textCheck(event) {
var text_pattern= /^[0-9a-zA-Z]*$/
var rec = event['record'];
rec['CHECK']['error'] =null;
var text_value=rec['CHECK']['value'];
if (text_value) {
if (text_value.length >10) {
if (!(text_value.match(text_pattern))) {
rec['CHECK']['error'] ='半角英数字10文字で入力してください';
}
}
}
}
kintone.events.on(['app.record.create.change.CHECK',
'app.record.edit.change.CHECK',
'app.record.index.edit.change.CHECK'], function(event) {
textCheck(event);
return event;
});
})();
きれいに貼れませんでした。
こんにちは。
Chromeの開発者ツールのConsoleに直接JavaScriptを書いて試したら画像のように動くので
正規表現でのバリデーション自体はうまくいっていそうですね。
デバッグはどのようにされましたでしょうか？？
例えばなのですが、コード１行１行の間に
console.log(“○行目”);
みたいなのを挟んで、何行目までは上手く行っている～というのを確認してみると、
何行目までは想定通りに動いているか分かると思います。
また、
var text_value=rec[‘CHECK’][‘value’];
このコードの下にconsole.log(text_value);を仕込んで正しく値が取れているか確認できます。
それと、正規表現で半角英数字10文字ぴったりを表現したい時は /^([a-zA-Z0-9]{10})$/ こんな感じにするといいかと思います。（正規表現は勉強中なので間違っていたらスミマセン＾＾；）
もしかしたらもうご確認されたページかも知れませんが、↓こちらおすすめです。
・動かない？そんな時はデバッグをしてみよう！入門編
・kintoneカスタマイズの基本的なデバッグの流れを身につけよう
また、
textCheck(event);
で、eventごと渡しているようですが、なんとなくですが、文字列データだけ渡したほうがスッキリするような気がします。
juridon さま
いつもお世話になっております。ご丁寧に解説頂きまして感謝致します。
デバッグについてもわかりやすいエラーしか理解できておりませんでした。
引き続き試行錯誤してみたところ、なんとか自己解決致しました！！
細かくご親切にアドバイスいただきましてありがとうございました;;
フィールドの下にエラーを出したい場合は、
↓こちらのページが参考になると思います。
フィールドにエラーを表示する
フィールド下にエラーメッセージを表示したい場合、佐々木さんの質問のコード内にも書いてあるコードのような感じでOKです。
rec['CHECK']['error'] ='半角英数字10文字で入力してください';
// ↓ドット表記でerrorプロパティにメッセージをセットする場合こんなかんじ
rec.CHECK.error = '半角英数字10文字で入力してください';
エラーメッセージを出したいフィールドのerrorプロパティにエラーメッセージをセットしたら
return event;するのが大切です。
また、「以前教えていただいたコード」だとエラーメッセージはフィールド下にはでません。
kintoneではなくブラウザにalertが出たあとに、returnで何も返さず終わる感じに見えます。
フィールド下にエラーを表示したい場合はalertではなくて、
佐々木さんが書かれたコードのように、フィールドのerrorプロパティにエラーメッセージをセットするのがよいです。
最後の行でreturn event;しているので、このif文内のreturn;の行は不要です。
if (checkPattern.test(field.value) === false) {
window.alert('8ケタ以下の半角数字で入力してください'); // ← ここは errorプロパティにエラーメッセージをセットする内容に変更
return; // この行は不要
}
また、以下の部分は上のif文で「true」の場合に動かすようにしたほうがいいと思います。
//想定内の数値であるため、処理をしてイベント内容をreturn
field.value = zeroPadding(field.value, limitLength);
うまくいきますように
おっと！回答が一足遅かったですね
解決したようで良かったです＾０＾！！！
もしできたら、どう解決されたのかを簡単に書いてくださると、
私も新しい発見できたり、他の方も学びになったり、と思いますのでよろしくお願いいたします＾０＾
juridon さま
とてもわかりやすくご教示いただき本当に感謝です;;
kintoneの開発において、引き続き指定する項目が多そうなので大変勉強になります！
動作そのものは解決したのですが、完璧に理解できていない部分も多々あるので
juridon様のアドバイスも引き続き参考に勉強に励みたいと思います^^
解決した際のコードも今どこが悪かったのかを細かく復習、調査してみてますので
私自身のメモとしても、こちらに後ほど残しておきたいと思います！
return event;もうっかり忘れないようにしないとですね。w
ありがちなので気をつけます！
初心者ゆえ一度詰まってしまうと一人頭を抱えてしまい困ってしまいますが
こちらで親切に親切に教えて頂き本当に救われています
今回も本当にありがとうございました！引き続き学習していきます！
こちらを参考にしました。
顧客リストの郵便番号、TEL、メールの入力をチェックする
正規表現はこちらを参考しました。
JavaScript 正規表現まとめ
私の場合、1つのアプリに複数のチェック項目があり、処理をまとめて書いているので
書き方があまりスマートではないかもしれません
(function() {
'use strict';
//入力チェック
function numCheck(event) {
// フィールドの定義(6桁の数字)
var text_pattern = /^\d{6}$/;
// event よりレコード情報を取得
var rec = event['record'];
//エラーの初期化
rec['フィールドコード']['error'] = null;
// 入力後、入力値を確認
var text_value = rec['フィールドコード']['value'];
if (text_value) {
if (text_value.length > 0) {
// 定義パターンにマッチするかを確認
if (!(text_value.match(text_pattern))) {
// マッチしない場合、フィールドにエラーの内容表示
rec['フィールドコード']['error'] = '6桁の半角数字で入力して下さい';
}
}
}
}
// 変更時イベント
kintone.events.on(['app.record.create.change.フィールドコード',
'app.record.edit.change.フィールドコード',
'app.record.index.edit.change.フィールドコード'], function(event) {
numCheck(event);
return event;
});
// 保存前イベント
kintone.events.on(['app.record.create.submit',
'app.record.edit.submit',
'app.record.index.edit.submit'], function(event) {
numCheck(event);
return event;
});
})();