ASP.NET Core MVCフレームワークでBootstrap5のvalidationを使う手段を教えて下さい。

Question

ASP.NET Core MVCフレームワークで、Bootstrap4をBootstrap5 にアップグレードするにあたって、jQueryの利用を一切やめたいので、クライアントのvalidationを使う手段として、どのようなものがあるかを教えて下さい。

利用ツール：Visual Studio 2019 Pro、.NET5

Bootstrap 5 Validationのリンク
https://getbootstrap.jp/docs/5.0/forms/validation/

例えばとして下記のモデル

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace DomainModel {
    // Model
    public class Test {

        [Key]
        public int Id { get; set; }

        [Required(ErrorMessage = "{0} は入力が必須です。")]
        [StringLength(20, ErrorMessage = "{0} の長さは {1} 文字以内で入力して下さい。")]
        [Display(Name = "テスト名")]
        public string TestName { get; set; }
    }
}

■　Bootstrap 4の場合

<input type="text" asp-for="TestName" class="form-control" />
<div>
<span asp-validation-for="TestName" class="text-danger" style="width: 100%;"></span>
</div>

■　Bootstrap 5の場合にどうするか

<input type="text" asp-for="TestName" class="form-control is-valid">
<div id="TestNameFeedback" class="valid-feedback">
    ここにエラーメッセージ
</div>

Comments

[退会済みユーザー]

あなたの言う「サーバーサイドの検証」とは何ですか？　XY 問題になっていませんか？

Bootstrap は、参考にしている記事に「ブラウザのデフォルトの動作、カスタムスタイルと JavaScript、HTML5 フォーム検証などを使用して、実用的なフィードバックをユーザーに提供します」と書いてあるように 100% クライアントサイド側の技術で、ASP.NET MVC の用語で普通に意味するところのサーバー側の検証とは違うようですが？

そもそも、何で ASP.NET MVC の検証に Bootstrap を使うということを考えたのですか？　ASP.NET MVC フレームワーク組み込みの検証機能を使って実現できないことがあるのですか？　だとするとそれは何なのですか？

[退会済みユーザー]

コメントありがとうございます。

サーバーサイドの検証の言葉は間違っていたかもしれませんが、

Modelに設定しているValidationとそのメッセージを、クライアント側で使用したいということです。

通常はasp-validation-forでjquery-validation用のspanタグを出力しますが、

ASP.NET MVC フレームワーク組み込みの検証機能を使う以外のカスタムの方法があればということです。

これでわかりますでしょうか？

[退会済みユーザー]

> ASP.NET MVC フレームワーク組み込みの検証機能を使う以外のカスタムの方法があればということです。
> これでわかりますでしょうか？

分かりません。先のコメントの私の質問、

ASP.NET MVC フレームワーク組み込みの検証機能を使って実現できないことがあるのですか？　だとするとそれは何なのですか？

・・・に答えてもらってないですが、そこのところはどうなのですか？

そういう話がない限り何の意味もない話と思いますけど。ASP.NET MVC フレームワーク組み込みの検証機能の詳細をご存じであれば、そういうことは考えもしないと思います。

[退会済みユーザー]

ご回答の内容が質問の目的と異なりますのでわからないのであれば、ご回答は結構です。
他の方からのご回答を待ちます。

しばらく質問をオープンにしますが、質問をクローズしろとか言わないで下さい。

Bootstrap5からjqueryを使用しなくなったので、ASP.NET Core MVC フレームワーク組み込みの検証機能ですることはできません。

将来的にASP.NET Core MVCで対応されるの待ってもよいのかもしれませんが、いまはBootstrap4のまま使うとして。

ASP.NET Core MVCフレームワークの機能だけでは実現できないことはいろいろあります。

今回の話は意味がない話ではないと思います。

[退会済みユーザー]

> Bootstrap5からjqueryを使用しなくなったので、ASP.NET Core MVC フレームワーク組み込みの検証機能ですることはできません。

全くの思い違い、見当違いがあるようです。そもそも ASP.NET Core MVC フレームワーク組み込みの検証機能は Bootstrap など使用していません。

だから、ASP.NET MVC フレームワーク組み込みの検証機能の詳細をご存じであれば、そういうことは考えもしないと言ったのです。

[退会済みユーザー]

Bootstrapでなく、jquery-validationの間違いでした。

Bootstrap4 + jquery-validation
↓
Bootstrap5でjquery-validationをつかわず、
Bootstrapのvalidation機能でModelの検証の機能を利用したいと思っているだけです。

Bootstrap5はjqueryから脱却しているので、jquery-validationを使わないようにすると、jqueryも使用しなくてよくなります。

asp-validation-forはjquery-validation用なので対応はしていない訳ですが。

[退会済みユーザー]

質問内容に間違いがあるのであれば、質問を編集して正しく書き直してください。

> Bootstrap5でjquery-validationをつかわず、
> Bootstrapのvalidation機能でModelの検証の機能を利用したいと思っているだけです。

ASP.NET MVC フレームワーク組み込みの検証機能を利用しないで、Bootstrap の validation を使いたいと言っているのですよね？

違いが分かっていればそういうのは見当違いの無理筋なことなので、分かっている人なら最初から考えもしない話です。

[退会済みユーザー]

ASP.NET MVC フレームワーク組み込みの検証機能を利用しないで、Bootstrap の validationを使うことですが、見当違いな無理筋ではないですが、

プログラムでjqueryを使わない流れもあるので、考える人はいると思います。

[退会済みユーザー]

> プログラムでjqueryを使わない流れもあるので、考える人はいると思います。

考えても無理だと分かって諦める人が 99% だと思います。「jqueryを使わない流れ」程度の話であれば特にそうで、無理さ加減が分かっている人なら考えもしないと思います。・・・と私が言っても納得できないようなので、時間と労力の無駄を覚悟で、頑張って考えてみてください。

[退会済みユーザー]

最後に一つだけ。

クライアント側での検証を諦めてサーバー側だけで検証するので良ければ、jQuery を使わなくて済みます。ただしそこに「Bootstrap5にサーバーサイド検証の機能」の出る幕はありません。ASP.NET MVC フレームワーク組み込みの検証機能を使うという話になります。

クライアント側の検証も必要で、どうしても jQuery は使いたくないということであれば、自力で JavaScript を書いて実装するということになります。たぶんそこにも Bootstrap Validation の出番はないと思います（機能的に不足かつサーバー側との整合の問題もありそう）。

[退会済みユーザー]

自力で JavaScript を書いて実装するのは1つの選択肢としては考えています。

開発しているシステムはクライアントとサーバーで2重を検証しているため、

クライアント側の検証はどうしても必要で、クライアント側とサーバー側で分けて同じ検証を書けば解決はしそうではありますが、少し考えてみます。

いまのところは方法がなければBootstrap5は使わずに、Bootstrap4 + jquery-validationのまま、進めようと思っています。

Vue.jsを使っていることもありますが、jqueryはコードが複雑になりやすいので利用はなるべく避けていますが。

[退会済みユーザー]

> Bootstrap4 + jquery-validationのまま、進めようと思っています。

先に、「そもそも ASP.NET Core MVC フレームワーク組み込みの検証機能は Bootstrap など使用していません」と書いたんですが話は通じてますか？　Bootstrap は ASP.NET Core MVC フレームワーク組み込みの検証機能には何も影響ないはずなので（検証結果を表示する際の CSS は別）、実際に Bootstrap5 を導入して試してみてはいかが。

[退会済みユーザー]

はい、ですので、Bootstrap4 + jquery-validationと書いてます
Bootstrapにjquery-validationは関係ないですが、Bootstrap5にする場合、jquery-validationを使いたくないと言うことになります。

[退会済みユーザー]

>> 先に、「そもそも ASP.NET Core MVC フレームワーク組み込みの検証機能は Bootstrap など使用していません」と書いたんですが話は通じてますか？

> はい、ですので、Bootstrap4 + jquery-validationと書いてます

話は通じていると言ってますか？　表題の、

> Bootstrap5のvalidationでASP.NET Core MVCフレームワーク組込のjquery-validationを使わずに、Modelの検証を使う方法を教えて下さい。

とか、質問本文の、

> Bootstrap5にサーバーサイド検証の機能はあるのですが、"asp-validation-for"タグはBootstrap4のjquery-validationのものでspanでその専用タグを出力するので、BootStrap5専用のタグは出力できないです。

とか、その後のあなたのレスを見ると話は通じてない（少なくとも通じてなかった）としか思えません。

> Bootstrapにjquery-validationは関係ないですが、Bootstrap5にする場合、jquery-validationを使いたくないと言うことになります。

見当違いを指摘されて、話が変わってきてませんか？　今は、

「Bootstrap4 を Bootstrap5 にアップグレードするにあたって、jQuery の利用を一切やめたいので、ASP.NET Core MVC フレームワーク組み込みの検証機能に手を加えて、jQuery を使用しないようにする方法を教えてほしい」

・・・という質問になっているように見えます。であれば、再度質問を編集して現時点での質問に書き直してください。

[退会済みユーザー]

話は変わってなくて、最初から
「Bootstrap4 を Bootstrap5 にアップグレードするにあたって、jQuery の利用を一切やめたいので、ASP.NET Core MVC フレームワーク組み込みの検証機能に手を加えて、jQuery を使用しないようにする方法を教えてほしい」の通りです

[退会済みユーザー]

表題も書き直してください。

> Bootstrap5のvalidationでASP.NET Core MVCフレームワーク組込のjquery-validationを使わずに、Modelの検証を使う方法を教えて下さい。
　↓↓↓
ASP.NET Core MVC フレームワーク組み込みの検証機能に手を加えて、jQuery を使用しないようにする方法を教えてほしい

> 話は変わってなくて、最初から

変わってますよ。一番最初の表題は、

> ASP.NET Core MVCで　Bootstrap5のvalidationで、サーバーサイドの検証を使う方法を教えて下さい

だったでしょ。見当違いを指摘されて、恥ずかしいからそこを取り繕ったのか、話がころころ変わってきています。

[退会済みユーザー]

質問した意味は最初から同じです

質問に対するダメ出しでなく、きちんと回答できるならコメントしてください。

[退会済みユーザー]

この質問の選択肢は下記と考えてます

1.asp-validation-forに変わるヘルパーなどをつくる

2.なにかのクラスを作る

3.サーバー検証とクライアント検証を分けて作る

4.次期vs2022のフレームワークを待ってみる

5.そもそもASP.NET Core MVCを使わない

[退会済みユーザー]

> 質問に対するダメ出しでなく、きちんと回答できるならコメントしてください。

ここは「質問への追記・修正の依頼」の場所です。質問がダメだからダメ出ししているのです。回答が欲しいならダメ出しされた部分を直してください。表題も書き直してください。話はそれからです。

> Bootstrap5のvalidationでASP.NET Core MVCフレームワーク組込のjquery-validationを使わずに、Modelの検証を使う方法を教えて下さい。
　↓↓↓
ASP.NET Core MVC フレームワーク組み込みの検証機能に手を加えて、jQuery を使用しないようにする方法を教えてほしい

[退会済みユーザー]

質問に追記した、

> asp-validation-forのタグ出力がjquery-validationのものになっている部分を変更できないか考えています。

は全くの見当違いです。そのあたりが分かってないので話が通じないのです。

[退会済みユーザー]

検討違いではありません、jquery-validationを使わずに、自作のjsライブラリで対応している人はいるようです。
https://tech.blog.aerie.jp/entry/2015/05/03/181049

文章から意図は指摘しなくてもわかりますよね？質問に対するダメ出しは、teratailの利用規約に違反します、迷惑行為です。

やめてくださいと言ってるから、この質問には返信しないでください。

[退会済みユーザー]

> 検討違いではありません、

いえ完全に見当違いです。「asp-validation-forのタグ出力がjquery-validationのものになっている部分を変更」するだけでは何ともなりません。それで Bootstrap5 Validator で検証できるようになると思ってるなら、デフォルトの span タグは自由に書き換えられるのだから、やってみてください。

> jquery-validationを使わずに、自作のjsライブラリで対応している人はいるようです。

では、自分で作ってみたらどうですか？　「asp-validation-forのタグ出力がjquery-validationのものになっている部分を変更」するだけでは何ともならないのが分かるはず。

> 質問に対するダメ出しは、teratailの利用規約に違反します、迷惑行為です。

ここのコメント欄の趣旨は「質問への追記・修正の依頼」で、質問が見当違い・意味不明ならダメ出し（＝修正の依頼）も含むはず。むしろ、質問者が見当違い・意味不明の質問を放置しておく方が一般閲覧者・回答者への迷惑行為です。

Answer 1

自己解決したので解決方法を投稿し、クローズします。他に良い方法を記載できる場合を除いて、異論はお断りします。

・独自のクライアントのvalidationを設置した。

・Bootstrap5のvalidationを表示するためには
inputのid="Test"と、<div class="invalid-feedback" id="TestFeedBack">{{ message.Test }}</div>の組み合わせで、validationメッセージが表示できる。

今回、vue.js 3を使用していますので、エラーメッセージを表示したい時は　v-bind:class　で"is-invalid"クラスを追加してあげる。{{ message.Test }}にメッセージを入れてあげる。

・vue.js 3と独自validationを使用するため、formタグ中のASP.NET Core MVC特有のaspタグが不要になったので全て削除した。　※aリンクとかで一部つかっている部分はあるが、formで使っているやつはいらないため全て削除した。

・サーバーのvalidationは今まで通り、ASP.NET Core MVCの ModelState.IsValid を利用。

・Vue.js 3 によってXSS対策はできているはずだが、もう少し調べてみようとは思う

・RequestVerificationTokenはそのまま使う。

・jquery、jquery-validationは一切不要になった。ただし、jquery、jquery-validationライブラリはASP.NET Core MVCのフレームワークのログイン認証関係で使用しているかもしれないため、削除しないようにした。

// 画面
<div class="row mb-3">
    <div class="col-md-3">
        <label for="Test" class="col-form-label">@Html.DisplayNameFor(model => model.Test)</label> <span style="color: orange;">[必須]</span>
    </div>
    <div class="col-md-9">
        <input type="text" class="form-control form-control-sm" id="Test" v-if="viewModel" v-bind:value.trim="viewModel.Test" v-bind:class="validationClass.Test" v-on:input="viewModel.Test = $event.target.value" />
        <div class="invalid-feedback" id="TestFeedBack">{{ message.Test }}</div>
    </div>
</div>

// クライアントのvalidation準備とデータ送信は以下のようにした
const app = Vue.createApp({
    data() {
        return {
            viewModel: {
                Test: null
            },

            // Bootstrap5で独自Validationに使いたい変数を下記のように3種類用意した
            validationClass: {
                Test: null
            },

            validationRule: {
                Test: ["required", "string-100"]
            },

            message: {
                Test: null
            },
        }
    },
    
    method: {
        validationCheck() {
            this.isCheckedValidation = true;
 
            // this.viewModel独自に用意したvueの変数、formのプロパティそのものです。
            const viewModel = JSON.parse(JSON.stringify(this.viewModel));
            const validationRule = JSON.parse(JSON.stringify(this.validationRule));

            for (var propertyName in viewModel) {
                if (propertyName in validationRule) {
                    // isCheckedValidationはクライアント独自のValidationを設置。
                    var message = isCheckedValidation(viewModel[propertyName], validationRule[propertyName]);

                    this.validationClass[propertyName] = null;

                    if (message != null) {
                        this.message[propertyName] = message;
                        this.validationClass[propertyName] = "is-invalid";

                        this.isCheckedValidation = false;
                    }
                }
            }
        },
        
        // 送信　Formの送信は使わずaxiosで送信
        onModalSubmitClicked() {
            // Data check　※inputのonChangeとかでvalidationをやってもいいけど、submitボタンを押した時にまとめてした
            this.validationCheck();

            if (!this.isCheckedValidation) {
                return;
            }

            const viewModel = JSON.parse(JSON.stringify(this.viewModel));
            const token = document.getElementsByName("__RequestVerificationToken")[0].value;

            axios({
                method: "post",
                url: url,
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                    "RequestVerificationToken": token
                },
                data: JSON.stringify(viewModel)
            }).then(() => {
                // success
            }).catch((response) => {
                // failure
            });
        }
    }
}