locked
Razor Pages Display Validation for Hidden Input RRS feed

  • 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.

    Saturday, December 12, 2020 9:13 PM

All replies

  • 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

    Monday, December 14, 2020 2:45 AM
  • 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>
    
    }

    Monday, December 14, 2020 6:46 PM
  • 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>
    
    }

    Monday, December 14, 2020 7:25 PM
  • User-474980206 posted

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

    Monday, December 14, 2020 8:15 PM
  • 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

    Tuesday, December 15, 2020 9:39 AM