かみそりのページは、隠された入力の検証を表示します

debugcn 投稿 Dev

MaxPowers

小数のユーザーフレンドリーな入力（パーセンテージ）を提供し、検証できるようにしようとしています。関連する入力が非表示になっているとasp-validation-forが表示されないため、スタックします。

現在の手法は、dbに保存されるフィールドにコピーされる表示専用フィールドのクライアント側のフォーマットにautonumeric.jsを使用することです。

検証メッセージを表示するにはどうすればよいですか？

LoanEstimate.cs

[NotMapped]
public string RateDisplayOnly { get; set; }

[Range(0,1,ErrorMessage="Rate must be between 0.000% and 100.00%")]
[DisplayFormat(DataFormatString = "{0:p}")]
[Required]
public decimal? Rate { get; set; }

Create.cshtml

    <div class="form-group">
        <label asp-for="LoanEstimate.Rate" class="control-label"></label>
        <input asp-for="LoanEstimate.RateDisplayOnly" class="form-control autonumeric-display-only autonumeric-percent" />
        <input asp-for="LoanEstimate.Rate" class="form-control" type="hidden"/>
        <span asp-validation-for="LoanEstimate.Rate" class="text-danger"></span>
    </div>

Javascript

$(document).ready(function ($) {

    //autonumeric.js field formatting
    const anElement = AutoNumeric.multiple('.autonumeric-currency', {
        currencySymbol: "$"
    });

    const anElement2 = AutoNumeric.multiple('.autonumeric-percent', {
            decimalPlaces: 3,
            rawValueDivisor: 100,
            suffixText: "%"
        }
    )
    $(".autonumeric-display-only").on('keyup', function () {
        var str = this.id
        var getThis = str.substring(0, str.indexOf("DisplayOnly"))
        $("#" + getThis).val(AutoNumeric.getNumericString("#" + this.id));
    });
    
});

問題

LoanEstimate.Rateの入力が非表示の場合、検証メッセージは表示されません

注：非表示になっていない場合は正しく表示されます

Yiyi You

を使用して$.validator.setDefaults、ここにデモがあります：

見る：

<form method="post">
    <div class="form-group">
        <label asp-for="Rate" class="control-label"></label>
        <input asp-for="RateDisplayOnly" class="form-control autonumeric-display-only autonumeric-percent" onblur="validateRate()"/>
        <input asp-for="Rate" class="form-control" hidden />
        <span asp-validation-for="Rate" class="text-danger"></span>
    </div>
    <input type="submit" value="submit" />
</form>

js：

function validateRate() {
        $("#Rate").valid();
    }
$.validator.setDefaults({
            ignore: [],
            // other default options
        });
        $(document).ready(function ($) {

            //autonumeric.js field formatting
            const anElement = AutoNumeric.multiple('.autonumeric-currency', {
                currencySymbol: "$"
            });

            const anElement2 = AutoNumeric.multiple('.autonumeric-percent', {
                decimalPlaces: 3,
                rawValueDivisor: 100,
                suffixText: "%"
            }
            )
            $(".autonumeric-display-only").on('keyup', function () {
                var str = this.id
                var getThis = str.substring(0, str.indexOf("DisplayOnly"))
                $("#" + getThis).val(AutoNumeric.getNumericString("#" + this.id));
            });

        });

結果：