フォームブリッジ「日付フィールドに制限をかけたい」を参考にJavascriptのカスタマイズを行っています。何度も試していますが実装ができません。
実現したいこととしては
①フォームを入力している日付より前は選択不可
②フォームを入力している日付から３日間をあけた日付から選択可能
Javascript初心者ですがお知恵をいただけませんでしょうか。よろしくお願いいたします。
(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);
// フィールドに入力された日
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' || /^(?!(2022-01-01|...日付列挙))/i.test(result) == false) {
flag = 1;
return false;
}
// 当日より前は不可
else if (result < min_date_format) {
flag = 2;
return false;
}
// ３日後より前は不可
else if (result < date_after3_format) ;{
flag = 3;
return false;
}
return true;
}
},
};
};
})();
入力された日付が、3日より先の日付かどうかを判定するようにしない理由というのはあるのでしょうか？
エラーを出しわけたい？
ありがとうございます。
予約変更を受付フォームを作成しており、申込日から３日目以降の変更のみ受付したいと考えております。
それ以外の特別な理由はございません。
state.fields[00].validations.push({
を
state.fields[0].validations.push({
に直したら動いているようでした？どんなエラーが出ていました？または、意図しない動作がありましたか？
本当にありがとうございます。
state.fields[0].validations.push({
で設定したのですが、カレンダーで「本日から３日以内」の日指定してもエラーメッセージが表示されません。
質問者がカスタマイズしようとしているフォームで、予約日時という項目がフォームの中で0番目なのですか？
私が試したときは0番目なるようにしています。
console.log(state.fields);
で表示されるコンソール画面で何番目ですか？一致させる必要があります。
参考にされたURLで質問していた人は、state.fields[00]は自分がカスタマイズしようとしているフォーム内容に合わせて修正してくださいという意味で、わざとエラーになる[00]にしたのではないでしょうか？
harada 様
ありがとうございます。
教示いただいたとおりstate.fiedls を修正しましたが、３日目以降の日付を選択してもエラー表示されます。
「土日指定選択不可」で日付指定していないためかと思い、
（そもそもこの設定は不要なので）自分なりに修正してみましたが動作しませんでした。
(function () {
'use strict';
fb.events.form.created.push(function (state) {
console.log(state.fields);
state.fields[22].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 'フォーム入力日の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);
// フィールドに入力された日
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 (result < min_date_format) {
flag = 1;
return false;
}
// ３日後より前は不可
else if (result < date_after3_format) ;{
flag = 2;
return false;
}
return true;
}
},
};
};
})();
大変、恐れ入りますが、再度教示をいただけませんでしょうか。
よろしく言お願い申し上げます。
エラーメッセージから見ると case2になっています。
case2ではないパターンなのにcase2になっているということは
// ３日後より前は不可
elseif(result < date_after3_format) ;{
flag =2;
returnfalse;
}
のあたりが怪しいです。)の後ろに余計な ; があるようです。
resultの中身は？date_after3_formatの中身は？どうなっていますでしょうか？
console.log() または ブレイクポイントを入れたらどうなりますか？
harada 様
ありがとうございました。
ご教示いただいた通り)の後ろの；が理由でした。
とても助かりました。お礼申し上げます。
(function () {
'use strict';
fb.events.form.created.push(function (state) {
console.log(state.fields);
state.fields[22].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 'フォーム入力日の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);
// フィールドに入力された日
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 (result < min_date_format) {
flag = 1;
return false;
}
// ３日後より前は不可
else if (result < date_after3_format) {
flag = 2;
return false;
}
return true;
}
},
};
};
})();
もし、まだ修正する元気があれば、
- 予約日が3日より未来か？だけの判定式にする
- 今は日付を文字列にして扱っているので、日付のまま計算すれば
よりコードが読みやすく、拡張しやすくなるとおもいます。
system
(system)
クローズされました:
11
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。