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

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"  />

Answer 1

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 

Answer 2

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.
   • Custom attributes
   • Client-side validation

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

Answer 3

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")
            //}

        });