Razor 页面显示隐藏输入的验证

Question

我正在尝试为小数提供用户友好的输入（以百分比形式）并能够验证。我被卡住了，因为如果关联的输入被隐藏，asp-validation-for 将不会显示。

目前的技术是使用 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; }

创建.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 的输入被隐藏时，验证消息不显示

注意：这里是否在不隐藏时正确显示

Answer 1

使用$.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));
            });

        });

结果：