Html: JavaScript: input: razor: minRange и maxRange - PullRequest
Новая
       1

Html: JavaScript: input: razor: minRange и maxRange

0 голосов
/ 08 июля 2020

У меня есть элемент ввода с установленными minRange и maxRange, и я пытаюсь получить настраиваемое сообщение о действительности. У меня также есть Input TagHelper для написания настраиваемого сообщения, которое я пытаюсь переопределить на стороне клиента. Я пробовал это до сих пор, но похоже, что это не работает. 

<input asp-for="Amount" minRange="50.00" maxRange="100.00" oninput="check(this)" />



<script type="text/javascript">
  function check(input) {
    if (input.validity.rangeUnderflow || input.validity.rangeOverflow) {
      input.setCustomValidity("Please enter an amount between $50.00 and $100.00.");
    }

  }
</script>

Обработано html: 

<input oninput="check(this)" type="text" data-val="true" data-val-number="The field Amount must be a number." data-val-required="The Amount field is required." id="Model_Amount" name="Model.Amount" value="97.95" data-val-range-min="50.00" data-val-range-max="100.00" data-val-range="Please enter an Amount between 50.00 and 100.00" class="form-control valid" placeholder="Amount" aria-required="true" aria-invalid="false" aria-describedby="Model_Amount-error">

Он по-прежнему вводит «Пожалуйста, введите сумму от 50,00 до 100,00»

input taghelper: 

    public override void Process(TagHelperContext context, TagHelperOutput output)
        {
          if (MinRange != null && MaxRange != null)
            {                    
                TagHelperAttribute minAttr = new TagHelperAttribute("data-val-range-min", MinRange);
                output.Attributes.Add(minAttr);
                TagHelperAttribute maxAttr = new TagHelperAttribute("data-val-range-max", MaxRange);
                output.Attributes.Add(maxAttr);
                TagHelperAttribute rangeAttr = new TagHelperAttribute("data-val-range", string.Format("Please enter a {0} between {1} and {2}", DisplayName, MinRange, MaxRange));
                output.Attributes.Add(rangeAttr);
            }
    }

Любая помощь приветствуется. Спасибо NH

1 Ответ

0 голосов
/ 09 июля 2020

Изменен ваш код с добавлением некоторых комментариев. Надеюсь, это поможет 

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>

<!-- Change minRange/maxRange to just min/max -->
<input asp-for="Amount" min="50.00" max="100.00" oninput="check(this)" />

<span id="display"></span>

</body>
<script type="text/javascript">

function check(input) {
    //Get current input field value
    var num = parseInt(document.querySelector('input').value);

    //Check if num is < or > than input.min/max
    if(num >= input.min && num <= input.max){
        document.getElementById('display').innerText = '';
    }else{
        document.getElementById('display').innerText = 'Number must be between 50 and 100';
    }
}

    
</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...