Q&A
調べたこと、試したことを追記してください。
Visual Studio 2019にてWebアプリケーション(Webページ)を作成しています。
.Net FrameworkはVer4.8です。
運用ルールで使用ブラウザはChromeに限定しております。
日付入力で本日より先（未来）の日付入力を不可とするために、CustomValidatorを使用しています。
サーバーサイドでの比較はできているのですが、クライアントサイドの比較においてjavascriptで記述するのですが、javascriptに詳しくないためどうしたらよいのか途方に暮れております。
Webで調べたりしいくつか方法を試しましたが、いまだ解決に至っておりません。
現状のCodeは下記の通りです。（基本がわかっていないので見当はずれがあると思います）
Html
1<html> 2<head> 3<script type="text/javascript"> 4 5 function cusDate_Validate(sender, args) { 6 var today = new Date(); 7 var tb = document.getElementById('<%= txtDate.ClientID %>').split('/') 8 return new Date(tb[0],tb[1] -1,tb[2]); 9 10 if ( tb > today ) { 11 args.IsValid = False; 12 } else { 13 args.IsValid = True; 14 } 15 } 16 17</script> 18<title>クライアント検証のテスト（CustomValidatorコントロール）</title> 19</head> 20<body> 21<form runat="Server"> 22タイトル： 23<asp:TextBox id="txtDate" runat="Server" Size="35" TextMode="Date" /> 24<asp:CustomValidator id="cusDate" runat="Server" 25 ControlToValidate="txtDate" ClientValidationFunction="cusDate_Validate" 26 OnServerValidate="cusDate_Validate" Display="Dynamic" 27 ErrorMessage="未来の日付は入力できません。" /> 28<br /> 29<asp:Button id="btnSend" runat="Server" Text="送信" /> 30</form> 31</body>
参考にしたサイトの参考箇所は下記の通りです。
最終的には一番上のサイトの情報が実現したいことに一番近かったので真似ています。
https://zukucode.com/2017/04/javascript-string-date.html
JavaScript 文字列を日付オブジェクトに変換する
// str: 日付文字列（yyyy-MM-dd, yyyy/MM/dd）
// delim: 区切り文字（"-", "/"など）
function toDate (str, delim) {
var arr = str.split(delim)
return new Date(arr[0], arr[1] - 1, arr[2]);
};
var str = '2017/01/02'
var date = toDate(str, '/');
https://www.sejuku.net/blog/22867
https://www.sejuku.net/blog/23115#ltgt
https://mebee.info/2020/12/07/post-18467/
http://surferonwww.info/BlogEngine/post/2020/06/27/validation-of-customvalidator-on-client-side.aspx
何卒アドバイスの程よろしくお願いいたします。
1T2R3M4様
参考にしたサイトの参考箇所は下記の通りです。
最終的には一番上のサイトの情報が実現したいことに一番近かったので真似ています。
https://zukucode.com/2017/04/javascript-string-date.html
JavaScript 文字列を日付オブジェクトに変換する
// str: 日付文字列（yyyy-MM-dd, yyyy/MM/dd）
// delim: 区切り文字（"-", "/"など）
function toDate (str, delim) {
var arr = str.split(delim)
return new Date(arr[0], arr[1] - 1, arr[2]);
};
var str = '2017/01/02'
var date = toDate(str, '/');
https://www.sejuku.net/blog/22867
https://www.sejuku.net/blog/23115#ltgt
https://mebee.info/2020/12/07/post-18467/
http://surferonwww.info/BlogEngine/post/2020/06/27/validation-of-customvalidator-on-client-side.aspx
質問は編集できます。
ご指摘ありがとうございました。
ASP.NET と言っても色々あります。Web Forms ですか？ .NET Framework のバージョンは何ですか？
コメント欄と違って回答欄の url には自動的にリンクは貼られませんので手動で張ってください。
ユーザーが必ず yyyy-MM-dd または yyyy/MM/dd 形式で入力してくれるとは限らないと思いますが、それの対応は考えなくていいのですか？
SurferOnWww様
Web Formです。 .NET Framework のバージョンは4.8です。
ASP.NETのテキストボックスはTextMode="Date"で、自動的にカレンダーが表示されyyyy/MM/dd形式で入力されると考えています。（運用ルールでブラウザはChromeを使用します）
SurferOnWww様のサイトも参考にさせていただきました。
リンクを張りなおします。
> Web Formです。 .NET Framework のバージョンは4.8です。
> 運用ルールでブラウザはChromeを使用します
それらの情報も質問欄に追記いただくようお願いします。Chrome 以外は考えなくても良いと理解しますが、そうでない場合は他の使用ブラウザも情報として追記願います。
ご指摘ありがとうございます。追記いたします。
> return new Date(tb[0],tb[1] -1,tb[2]);
> if ( tb > today ) {
質問のコードの上記の部分を、
var userInput = new Date(tb[0],tb[1] -1,tb[2]);
if ( userInput > today ) {
のようにしたらどうなりますか？
SurferOnWww様
ありがとうございます。
未来の日付を入力しテキストボックスからtabキーで抜けてもエラーメッセージは表示されません。
デバッガを使ってステップ実行して変数を調べることはできますか？ あと、False, Ture は false, true でないとダメでは？
ChromeではうまくデバッグできなかったためIEで行いました。
var tb = document.getElementById('txtDate').split('/');
のところで
0x800a01b6 - JavaScript 実行時エラー: オブジェクトは 'split' プロパティまたはメソッドをサポートしていません。
のエラーが発生しました。
またtodayは「Sat Aug 14 2021 11:55:41 GMT+0900 (東京 (標準時))」が入っていました。
分かりました。後で回答欄にどのように修正すべきかをまとめて書いておきます。
SurferOnWww様
ありがとうございます。
お手数をお掛けしますがよろしくお願いいたします。
回答2件
0
（基本がわかっていないので見当はずれがあると思います）
関数はreturnを書いたところで処理を終えます
投稿2021/08/14 01:19
総合スコア6426
hentaiman様
アドバイスありがとうございます。
そうなんですね。
ということはreturnの前で判断する必要があるんですね。
てっきりreturnは変換後の文字列を変数tbに返すものと思っておりました。
tbを変換したものをもう一つ別の変数に代入し、それと比較する必要がありそうですね。
そうですね サーバーサイドで何の言語使ってるか知りませんけど、それもreturnで終わるのは同じですよね？
使用言語によってはreturn書かないですけど、その場合は一番最後に見えないreturnが書いてあると思えば。それも言語次第ですけど
hentaiman様
ありがとうございました。
0
ベストアンサー
質問のコメント欄で、
return new Date(tb[0],tb[1] -1,tb[2]);
if ( tb > today ) {
質問に書かれているコードの上記の部分を、
var userInput = new Date(tb[0],tb[1] -1,tb[2]);
if ( userInput > today ) {
のようにすることと、False, Ture を false, true にする
・・・と書きましたが、それに加えて質問のコメント欄の質問者さんの 2021/08/14 11:59 のコメントの、
var tb = document.getElementById('txtDate').split('/');
のところも以下のように直す必要があります。value プロパティを使って値を取得し、それを '/' ではなく '-' で split します。
function cusDate_Validate(sender, args) { var today = new Date(); var tb = document.getElementById('<%= txtDate.ClientID %>').value.split('-'); var userInput = new Date(tb[0],tb[1] -1,tb[2]); if (userInput > today) { args.IsValid = false; } else { args.IsValid = true; } }
'/' ではなく '-' で split する理由は、Chrome 上での表示は下の画像のように 2021/08/17 となるものの、value プロパティで取得できる文字列は "2021-08-17" となるからです。サーバーに送られる文字列も同様に "2021-08-17" になるのでサーバー側での検証および処理の際に注意してください。
ChromeではうまくデバッグできなかったためIEで行いました。
JavaScript は Chrome のディベロッパーツールでデバッグできますので次の機会には利用してみてください。
投稿2021/08/14 03:31
編集2021/08/14 03:42退会済みユーザー
総合スコア0
SurferOnWww様
素晴らしいアドバイスありがとうございました。
おかげ様で思い通りの機能を実現することが出来ました。
また表示上と実データの違いについても教えていただき感謝です。
表示上の内容を信じてしまいがちですが、今後はデバッグしながら実データを確認します。
Chromeでのデバッグにつきましてもアドバイスしていただきありがとうございました。
あなたの回答
tips
プレビュー
