In this hypothetical page I have these inputs:

<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />

The that's confusing me is I know that they're restricted if I put the inputs in a form and submit the form.

But if you go to the fiddle: Fiddle

You can easily type in 100 or -20 or anything out side of the range of 1-9.

Is there a way to restrict the values in an input field at the time of inputting them? / without submitting it

(side questions: when do the min/max attributes of the input fields take effect? is it only at the time of submitting the form? Is it possible to validate the values without submitting a form?)

In this hypothetical page I have these inputs:

<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />

The that's confusing me is I know that they're restricted if I put the inputs in a form and submit the form.

But if you go to the fiddle: Fiddle

You can easily type in 100 or -20 or anything out side of the range of 1-9.

Is there a way to restrict the values in an input field at the time of inputting them? / without submitting it

(side questions: when do the min/max attributes of the input fields take effect? is it only at the time of submitting the form? Is it possible to validate the values without submitting a form?)

• javascript
• jquery
• html

Share Improve this question Follow asked Nov 7, 2015 at 4:51 jmancherjejmancherje 6,64388 gold badges3838 silver badges5959 bronze badges 2

• 1 I think html 5 validation run when you submit form. You can use jquery validation plugin (jqueryvalidation/validate) instead of html 5 validation. – Karan Commented Nov 7, 2015 at 4:59
• In browsers that support the number field, you should get an error when you blur/leave the field. (what browser are you using?) – scunliffe Commented Nov 7, 2015 at 4:59

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

It looks like Google Chrome will enforce the min/max values when you use a submit button on the form.

I've updated your sample, with 3 submit buttons (labelled accordingly)... one will enforce the validation, the others will show the errors, but submit anyway.

http://jsfiddle/uatxcvzp/12/

 <form>
    <input type="number" min="1" max="9" required />
    <input type="number" min="1" max="9" required />
    <input type="number" min="1" max="9" required />
    <input type="number" min="1" max="9" required />
    <br/>
    <br/><input type="button" value="Submit With No Forced Validation" onclick="this.form.submit();"/>
    <br/><input type="submit" value="Submit With No Forced Validation" onclick="this.form.submit();"/>
    <br/><input type="submit" value="Submit With Forced Validation"/>
</form>

In Firefox, the validation occurs on field blur, highlighting the field border in red and showing a tooltip explaining the error on hover. Using either submit style will halt and require that the errors are fixed.

In IE10, only the native submit button will force validation when you try to submit the form.

In Safari on iOS9.1, it looks like it is pletely ignored regardless of the submit button/code style used. :-(

try this:

$("input[type='number']").change(function() {
  var $this = $(this);
  var val = $this.val();
  var span = $(".error");
  if (val > 9 || val < 1) {
    
    span.text("value must be between 1 and 9");
  }else{
   span.text("");
  }
});

input {
  width: 40px;
  height: 40px;
  font-size: 1.4em;
}
.error {
  color: red;
  font-style: italic;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<input type="number" min=1 max=9 required />
<span class="error"></span>

you can try the following code:

<input type="number" min=1 max=9 required onKeyDown="if(this.value.length==1) return false;" />

thy this its work for me

<input type="text" name="number" minlength='1' maxlength="9" required>

It looks like it's not natively possible as an uncontrolled ponent and it needs to bee a controlled ponent - either writing javascript/jQuery manually, or using a library.

If using React, you can use something like react-hook-form and the code would look something like below. Specifically, see the age input.

Full documentation is here: https://react-hook-form./api/useform/register

import * as React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm({
    defaultValues: {
      firstName: '',
      lastName: '',
      age: '',
    }
  });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      <input {...register("firstName", { required: true })} placeholder="First name" />
      <input {...register("lastName", { minLength: 2 })} placeholder="Last name" />

      <input
        {...register("age", {
          validate: {
            positive: v => parseInt(v) > 0,
            lessThan200: v => parseInt(v) < 200,
          }
        })}
      />

      <input type="submit" />
    </form>
  );
}