Блог

Я пытаюсь предоставить удобный для пользователя ввод (в процентах) для десятичной дроби и иметь возможность проверки. Я застрял, потому что 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; }
 

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.Скорость скрыта

Примечание: здесь он отображается правильно, когда не скрыт

Используйте $.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));
            });

        });
 

Результат: