validation for input type number with minimum and maximum range

Question

I want to validate if the input type number crosses the range.

<input type="number" min="-10" max="10"  required="true" message="you can give score -10 to +10 only">

I tried required = true but not working i want to show if the value crosses the range show message like you can give score -10 to +10 only

I want to allow while entering itself, not when submitting.

How can i do that..?

Answer 1

You can look at this jsfiddle i have created. https://jsfiddle.net/6bkws7zd/

HTML

<input id="txtNumber" type="number" message="you can give score -10 to +10 only" />
<span id="errorMsg" style="display:none;">you can give score -10 to +10 only</span>

Jquery

$("#txtNumber" ).keyup(function() {
  if($('#txtNumber').val()<-10 || $('#txtNumber').val()>10 ){
      $('#errorMsg').show();
  }
  else{
    $('#errorMsg').hide();
  }
});

You can add required field to input control if you want to make it required.