Razor Pages Display Validation для скрытого ввода
Я пытаюсь предоставить удобный ввод (в процентах) для десятичной дроби и иметь возможность проверки. Я застрял, потому что 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 скрыт
Примечание: здесь он отображается правильно, когда не скрыт
Ответы 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));
});
});
результат:
Я обновил свой ответ, добавил функцию размытия на <input asp-for = "RateDisplayOnly"/>, когда элемент потерял фокус, подтвердите $("#Rate").
Потрясающий! Ваше предложение в комментарии выше работает, обратите внимание: пример кода, который у вас есть в вашем ответе, не работает. Пожалуйста, замените что-то вроде $(".autonumeric-display-only").blur(function () { var str = this.id var getThis = str.substring(0, str.indexOf("DisplayOnly")) $(" #" + getThis).valid(); }); (внутри документа готово, я полагаю) и я отмечу как ответ. Спасибо за вашу помощь!
Ах, но ваш пример работает с вашим кодом, так что можно идти, помечая как ответ, спасибо!
Спасибо! Сообщение действительно срабатывает при нажатии кнопки «Отправить». Я заметил, что когда поле ввода не скрыто, сообщение проверки запускается, когда я выхожу из поля <input asp-for = "Rate" class = "form-control" />, однако с этим методом оно запускается только при нажатии представлять на рассмотрение. Есть ли способ заставить его срабатывать, когда я выхожу из <input asp-for = "RateDisplayOnly" class = "form-control autonumeric-display-only autonumeric-percent" />?