背景・実現したいこと
フォームブリッジに日付フィールドを設けています。
その日付フィールドには以下の制限をかけたいです。
①土日と指定日付（年末年始など）は選択不可
②フォームを入力している日付より前は選択不可
③フォームを入力している日付から平日の３日間をあけた日付から選択可能
エラー情報 （開発者ツールのコンソール）
上記の①は設定できたのですが、②③が設定できません。
下記URLを参考に③を設定してみましたが、どの日付も選択可能になってしまいました。
（＝エラー表示がされない状態）
https://developer.cybozu.io/hc/ja/community/posts/360016773086-%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%96%E3%83%AA%E3%83%83%E3%82%B8-%E3%81%A7%E6%9C%AC%E6%97%A5%E3%81%8B%E3%82%89%EF%BC%91%E3%83%B6%E6%9C%88%E4%BB%A5%E4%B8%8A%E5%BE%8C%E3%81%AE%E6%97%A5%E4%BB%98%E3%81%97%E3%81%8B%E9%81%B8%E6%8A%9E%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E3%82%88%E3%81%86%E3%81%AB%E3%81%99%E3%82%8B
利用したソースコード
(function () {
'use strict';
fb.events.form.created.push(function (state) {
console.log(state.fields);
state.fields[00].validations.push({
params: [],
rule: 'custom_validation1'
});
return state;
});
fb.addValidators = function (state) {
return {
custom_validation1: {
getMessage: function (fieldCode, params) {
return '土日祝日、年末年始は選択できません。';
},
validate: function (value, params) {
alart(value);
var min_date = new Date();
min_date.setDate(min_date.getDate() + 3);
return min_date > new Date(value).getDate();
var y = value.getFullYear();
var m = ("00" + (value.getMonth()+1)).slice(-2);
var d = ("00" + value.getDate()).slice(-2);
var result = y + "-" + m + "-" + d;
//土日選択不可
if(value.getDay() =='0' || value.getDay() =='6'){
return false;
}else{
//その他選択不可日
return /^(?!(2022-01-01|....日付を列挙))/i.test(result);
}
}
},
};
};
})();
JavaScript初心者でお恥ずかしいですが、ご教授いただければ幸いです。
よろしくお願い致します。
NKIさん
こんにちは。
①含めて順に回答します。
【エラー判定】
// フォーム入力日
var min_date = new Date();
var min_date_format = min_date.getFullYear() + "-" + ("00" + (min_date.getMonth() + 1)).slice(-2) + "-" + ("00" + min_date.getDate()).slice(-2);
①土日と指定日付（年末年始など）は選択不可
// 土日選択不可
if (value.getDay() == '0' || value.getDay() == '6' || /^(?!(2022-01-01|....日付を列挙))/i.test(result) == false) {
flag = 1;
return false;
}
②フォームを入力している日付より前は選択不可
// 当日より前は不可
if (result < min_date_format) {
flag = 2;
return false;
}
③フォームを入力している日付から平日の３日間をあけた日付から選択可能
// フォーム入力日の3日後
var date_after3 = new Date(min_date.setDate(min_date.getDate() + 3));
var date_after3_format = date_after3.getFullYear() + "-" + ("00" + (date_after3.getMonth() + 1)).slice(-2) + "-" + ("00" + date_after3.getDate()).slice(-2);
// 3日後より前は不可
if (result < date_after3_format) {
flag = 3;
return false;
}
④上記に該当しない場合（エラーなし）
validateのfunctionの末尾に記載が必要です。
return true;
【エラーメッセージ表示】
エラーメッセージを変えるためにflagで判断します。
fb.addValidators = function(state) {
var flag = 0;
return {
custom_validation1: {
getMessage: function(fieldCode, params) {
switch (flag) {
case 1:
return '土日祝日、年末年始は選択できません。';
case 2:
return 'フォーム入力日より前の日付は選択できません。';
case 3:
return 'フォーム入力日の3日後より前の日付は選択できません。';
}
},
// 以下略
これらを組み合わせてコードを記載してみてください。
本日からフォームブリッジを使い始めたものです。。。
koichiさんのコードを組み合わせてみたのですが、うまく動作しませんでした・・・
具体的にどのように組み合わせれば良いか教えて頂けますでしょうか。
inoさん
差し支えなければ新規に投稿いただくこと可能ですか？
その際に現在のコードも記載いただけると幸いです。
koichi さん
こんにちは。いつもありがとうございます。
載せていただいたコードを自分で組み合わせてやっているのですが、うまくいきませんでした。
console画面でエラーが出ないようにはなったのですが、動作しないままです。
色々やってみて「できました」と報告したかったのですが、できないままで返信に時間がかかってしまい申し訳ありません。
自分で組んだコードは下記です。
state.fields[00]には、該当の数字を入れています。
(function () {
'use strict';
fb.events.form.created.push(function (state) {
console.log(state.fields);
state.fields[00].validations.push({
params: [],
rule: 'custom_validation1'
});
return state;
});
fb.addValidators = function(state) {
var flag = 0;
return {
custom_validation1: {
getMessage: function(fieldCode, params) {
switch (flag) {
case 1:
return '土日祝日、年末年始は選択できません。';
case 2:
return 'フォーム入力日より前の日付は選択できません。';
case 3:
return 'フォーム入力日の3日後より前の日付は選択できません。';
}
},
validate: function (value, params) {
// フォーム入力日
var min_date = new Date();
var min_date_format = min_date.getFullYear() + "-" + ("00" + (min_date.getMonth() + 1)).slice(-2) + "-" + ("00" + min_date.getDate()).slice(-2);
// フォーム入力日の３日後
var date_after3 = new Date(min_date.setDate(min_date.getDate() + 3));
var date_after3_format = date_after3.getFullYear() + "-" + ("00" + (date_after3.getMonth() + 1)).slice(-2) + "-" + ("00" + date_after3.getDate()).slice(-2);
// 土日指定日選択不可
if (value.getDay() == '0' || value.getDay() == '6' || /^(?!(2022-01-01|...日付列挙))/i.test(result) == false) {
flag = 1;
return false;
}
// 当日より前は不可
else if (result < min_date_format) {
flag = 2;
return false;
}
// ３日後より前は不可
else (result < date_after3_format) ;{
flag = 3;
// return false;
}
return true;
}
},
};
};
})();
よろしくお願い致します。
NKIさん
ご確認いただきありがとうございます。
以下はNKIさんが記載されたコードのまま変更ありませんので追記ください。
位置は「// 土日指定日選択不可」の上です。
// フィールドに入力された日
var y = value.getFullYear();
var m = ("00" + (value.getMonth()+1)).slice(-2);
var d = ("00" + value.getDate()).slice(-2);
var result = y + "-" + m + "-" + d;
また、最後の「flag = 3」の後の「return false;」がコメントアウトされてますので、こちらはコメント解除ください。
koichi さん
ご確認、ご指摘ありがとうございます。
追記をし、「return false;」を修正しましたら、エラーメッセージが表示されるようになりました。
ありがとうございます！
１つだけ、『case3＝③フォームを入力している日付から平日の３日間をあけた日付から選択可能』がうまく制御されませんでした。
フォーム入力日の平日３日間以降の平日すべてにcase3のエラーメッセージが出てしまいました。
何かまだ間違いがあるでしょうか？
よろしくお願い致します。
NKIさん
見落としていました。
最後の条件文は「else」ではなく「else if」としてみてください。
また、その末尾の { の前にセミコロンが入ってますので、そちらも削除ください。
NKIさん
解決に繋がり何よりです。
inoさん
もし上記ご覧になってましたら、同じ内容で解決に繋がるかもしれませんのでご確認ください。
system
2024 年 9 月 5 日午前 12:44
11
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。