locked
How can I force the input value with Max integer and Max Decimal . RRS feed

  • Question

  • User-1355965324 posted

    How can I force the user to enter the  integer part maximum value 10 and decimal part maximum .59.  the system should only acccept the values

    from 1 to 10.59. The system should not accept  5.60  .The decimal part value must be below 59. 

    Thanks

    Pol

    <input type="number"   class="form-control format-text emphrs" asp-for="@Model.attendanceLogList[i].NormalHrs"  />
    Thursday, May 27, 2021 6:39 AM

Answers

  • User-1355965324 posted

    Thanks for the reply. I resolved it another way  and it seems working fine. Many thanks

     $('.emphrs').keyup(function (e) {
                var x = (parseFloat(this.value).toFixed(2));
                var a = Math.floor(x);
                var b = (x % 1).toFixed(2).substring(2);
                var c = (a + 0.59).toFixed(2);
                $("#error").empty();
                if (b > 59) {
                    $("#number").val(c);
                    $("#error").text("Please enter with 0-59 decimal part")
                    $(e.target).val(0.00);
                }
                if (a > 10) {
                    $("#number").val(10);
                    $("#error").text("Please enter with 1-10 integer part")
                    $(e.target).val(0.00);
                }
                //if (a < 1) {
                //    $("#number").val(1);
                //    $("#error").text("Please enter with 1-10 integer part")
                //}
    
            });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 4, 2021 11:39 AM

All replies

  • User-474980206 posted

    Please read the docs

    https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-5.0

    see custom validation 

    Thursday, May 27, 2021 2:35 PM
  • User1686398519 posted

    Hi polachan, 

    According to your needs, I wrote an example, you can refer to it.

    1. You can customize the model validation on the client and server.
    2. Below are the links that you can click to help you understand the example I provided.

    MaxValidationAttribute

        public class MaxValidationAttribute : ValidationAttribute, IClientModelValidator
        {
            public void AddValidation(ClientModelValidationContext context)
            {
                context.Attributes.Add("data-val-maxvalue", GetErrorMessage());
                context.Attributes.Add("data-val-maxvalue-demical", "10.60");
            }
            public string GetErrorMessage() =>
                $"The integer part is up to 10, and the decimal part is up to 0.60";
            protected override ValidationResult IsValid(object value,
                ValidationContext validationContext)
            {
                var model = (TestValidationModel)validationContext.ObjectInstance;
                var intpart = (int)model.NormalHrs;
                var decimalpart = model.NormalHrs - intpart;
                if (intpart<1||intpart>10||Decimal.Compare(decimalpart,0)<0|| Decimal.Compare(decimalpart, 0.60m)>=0)
                {
                    return new ValidationResult(GetErrorMessage());
                }
                return ValidationResult.Success;
            }
        }

    TestValidationModel

        public class TestValidationModel
        {
            [MaxValidation]
            public decimal NormalHrs { get; set; }
        }

    Index

    @{
        ViewData["Title"] = "Home Page";
    }
    @model WebApplication24.Models.TestValidationModel
    <form asp-action="test" asp-controller="Home" type="post">
        <input asp-for="NormalHrs" />
        <span asp-validation-for="NormalHrs" class="text-danger"></span>
        <button type="submit">submit</button>
    </form>
    @section scripts{
        <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
        <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
        <script>
            $.validator.addMethod('maxvalue', function (value, element, params) {
                var maxvalue = params[1];
                var intpart = parseInt(value);
                var decimalpart = (value - intpart).toFixed(2);
                if (intpart <1 || intpart >10 || decimalpart<0 || decimalpart>=0.60) {
                    return false;
                }
                return true;
            });
            $.validator.unobtrusive.adapters.add('maxvalue', ['demical'], function (options) {
                var element = $(options.form).find('input#NormalHrs')[0];
                options.rules['maxvalue'] = [element, parseFloat(options.params['demical']).toFixed(2)];
                options.messages['maxvalue'] = options.message;
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    Monday, May 31, 2021 8:23 AM
  • User-1355965324 posted

    Thanks for the reply. I resolved it another way  and it seems working fine. Many thanks

     $('.emphrs').keyup(function (e) {
                var x = (parseFloat(this.value).toFixed(2));
                var a = Math.floor(x);
                var b = (x % 1).toFixed(2).substring(2);
                var c = (a + 0.59).toFixed(2);
                $("#error").empty();
                if (b > 59) {
                    $("#number").val(c);
                    $("#error").text("Please enter with 0-59 decimal part")
                    $(e.target).val(0.00);
                }
                if (a > 10) {
                    $("#number").val(10);
                    $("#error").text("Please enter with 1-10 integer part")
                    $(e.target).val(0.00);
                }
                //if (a < 1) {
                //    $("#number").val(1);
                //    $("#error").text("Please enter with 1-10 integer part")
                //}
    
            });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 4, 2021 11:39 AM