剃须刀页面显示隐藏输入的验证

Question

我试图为小数点提供用户友好的输入(百分比)，并能够验证。我被卡住了，因为如果关联的输入是隐藏的，asp-验证-for将不会显示。

当前的技术是将autonumeric.js用于仅显示字段上的客户端格式，该字段被复制到要保存到db的字段中。

如何获得要显示的验证消息？

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的输入时，不显示验证消息

​

注意:在没有隐藏的情况下，它是否正确显示？

​

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>

联署材料：

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));
            });

        });

结果：

​