Razor Pages Display Validation for Hidden Input - asp.net-core

Question

I am attempting to provide user friendly input (as a percentage) for a decimal and be able to validate. I am stuck because the asp-validation-for will not display if the associated input is hidden.
Current technique is to use autonumeric.js for the client side formatting on a display only field that gets copied into the field to be saved to db.
How can I get validation message to display?
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));
});
});
ProblemValidation message does not display when input for LoanEstimate.Rate is hidden
Note: here is it displaying properly when not hidden

Answer 1

Use $.validator.setDefaults,here is a demo:
View:
<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));
});
});
result: