how to not accept the value out of range values inside html input box after setting min and max valu-CodePudding

      <label for="interest-rate">Interest Rate</label>
      <input
        type="number"
        id="interestRate"
        name="loancalc"
        placeholder="0"
        min="0"
        max="30"
        
        oninput="this.form.interestRangeRate.value = this.value"

        ;
      /><span >%</span>
      <br />
      <input
        type="range"
        name="loancalc"
        id="interestRangeRate"
        min="0"
        max="30"
        oninput="this.form.interestRate.value=this.value"
        ;
      />

inside input box if i enter 40 which is more than maximum value but still it is accepting after pressing enter button it is validating but if input value is more than max then it should pass max value.

CodePudding user response：

You should add additional validation of data on submit action. This is how html input is working. You can try to use custom number input library to handle it.

CodePudding user response：

Replace oninput="this.form.interestRate.value=this.value with oninput="checkValue(this);

this should fix it!

here is a codepen.io link!

CodePudding user response：

You can have a read of HTML5 Constraint Validation

<input  type="number" id="interestRate" pattern="[0-30]"  />
<script>
    document.getElementById('interestRate').validity.patternMismatch;
</script>