Razor Pages Display Validation for Hidden Input

Question

User-1222287140 posted

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? If I am taking the wrong approach, is there a better method for formatting user input?

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

Problem

ErrorMessage="Rate must be between 0.000% and 100.00%"

does not display when input for LoanEstimate.Rate is hidden.

Answer 1

User1312693872 posted

Hi,MaxPowers1234

MaxPowers1234

does not display when input for LoanEstimate.Rate is hidden.

You can add the following js:

<script type="text/javascript">
        $.validator.setDefaults({
            ignore: ""
        });
</script>

Then the validation will be applied to the hidden Input.

Best Regards,

Jerry Cai

Answer 2

User-1222287140 posted

Thanks so much for your help. I updated the following on Create.cshtml, but I still get the problem where the validation message doesn't display. No errors in browser console. Thoughts?

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="https://cdn.jsdelivr.net/npm/autonumeric@4.5.4"></script>
    <script type="text/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));
            });


            $.validator.setDefaults({
                ignore: ""
            });

        });
    </script>

}

Answer 3

User-1222287140 posted

Similar idea, subtle difference. This gets me closer - the validation message displays upon pressing the submit button. Is it the expected behavior that this validation message only gets triggered upon pressing submit vs upon tabbing out of the field?

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="https://cdn.jsdelivr.net/npm/autonumeric@4.5.4"></script>
    <script type="text/javascript">
        $.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));
            });

        });
    </script>

}

Answer 4

User-474980206 posted

not sure how you tab out of a hidden field. jquery validation uses lazy (no validation) until the first submit. 

Answer 5

User1312693872 posted

Hi,MaxPowers1234

MaxPowers1234

Is it the expected behavior that this validation message only gets triggered upon pressing submit vs upon tabbing out of the field?

In normal way, we should click submit to show the validation error.

But If you want to trigger it upon tabbing out of the field, you should use jquery to write validation like onchange method or use Remote

validation to validate before submit. And that will be anew question. If you want to do that, you can post a new thread.

Best Regards,

Jerry Cai