以前投稿した「ASP.NET Core でSPAではなくVue.jsを利用してみる」で記述していたASP.Net core のRazorPageのバリデーションアトリビュートをある程度まで実装してみました。
サンプルとして自由に利用してみてください。
以下に、これを作るうえで気づいたことを書いておきます。
基本思想
（１）基本的にHTML5のバリデーションを用いてクライアントサイドでチェックする。
（２）サーバー側のバリデーションは基本的にエラーにならないが、POSTを手作業で行った場合などを考慮して一応作っておく。
気づいたこと、苦労したこと
（１）MergeAttributeは上書きできない
最初に躓いたのがこれです。
クライアントバリデーションの属性を設定しようとしたのですが、設定されていない属性は追加できるのですが、既に設定されている属性は変更できない仕様みたいです。おそらく、RazorPageを記述している時に手で記述した属性を優先させるためと思われます。ただ、バリデーションで属性を設定する前にタグヘルパーが属性を設定してしまう為、バリデーションの処理の時点ではtype属性が設定されいて、変更することができませんでした。
（２）setCustomValidityを利用した場合、inputイベントでクリアしておく必要がある。
次に引っかかったのが「setCustomValidity」を利用してエラーを発生させた場合、それを消さないとずっとエラーのままでした。設定する可能性のあるコントロールのみ対象とすればよいのですが、大変なので「input」タグ全てを対象としました。これをしないと一度エラーになった項目はずっとエラーのままです。
（３）html5のバリデーションのサポート範囲が異なる
ブラウザごとにhtml5のバリデーションサポートの範囲が異なるので、自動的にサポートしている場合はそちらを優先させるようにしました。具体的にはinputイベントの処理でCustom以外のエラーがある場合は何もせず、無い場合のみ独自のバリデーション処理を実施しています。
（４）Compareの実装
比較先のコントロールでもinputでのチェックを行う必要がありました。当たり前ですね。
サポートしたバリデーション
| バリデーション | 概要 |
|---|---|
| Require | 必須。require属性に「require」を設定。ほとんどのブラウザでサポートされています。ErrorMessageを設定するとエラー時のメッセージが変更できます。 |
| StringLength | 入力文字列の長さ制限。MaxLength,MinLengthで最大長と最小長を設定できます。空文字は必須チェックで行うので最小が設定されていてもエラーになりません。OverMaxErrorMessageとUnderMinErrorMessageを設定すると独自のエラーメッセージが設定できます。（ErrorMessagは利用していません） |
| Date | 日付入力のバリデーションです。ErrorMessageを設定するとエラー時のメッセージが変更できます。 |
| メールアドレスのバリデーションです。ErrorMessageを設定するとエラー時のメッセージが変更できます。 | |
| Enum | 列挙型のバリデーションです。手入力で行うようなインターフェースは考えられないので使うことはないと思います。 |
| RegularExpression | 正規表現バリデーション。ErrorMessageを設定するとエラー時のメッセージが変更できます。 |
| Range | 範囲指定バリデーション。整数と実数で利用可能です。Min、Max、Stepを設定して、最小値、最大値、刻み幅を設定できます。刻み幅は最小値からの刻み幅となりますので、最小値の設定が必須となります。メッセージ変更はそれぞれ、UnderMinErrorMessage、OverMaxErrorMessage、NoStepErrorMessageに設定します。 |
| Compare | 他の入力と一致確認バリデーション。比較対象の項目を与えます。ErrorMessageを設定するとエラー時のメッセージが変更できます。 |
ソース
GitHubの「nosa67/html5Validation」に作ったものを保存しておきました。
煮るなり焼くなり自由にしてください。
簡単なテストはしていますが、まだまだエラーはあると思います。特にサーバーでのチェックは甘いです。
すこしでも参考になれば幸いです。
助言がほしいです
いろいろと考慮して作成してみたら、クライアントのjavaScriptがやたらと大きくなって汚くなってしまいました。
もっと、スマートな方法をご存知ならコメントください。