CODEWITHSUNDEEP
javascriptjqueryhtml
jmancherje
jmancherje

Reputation: 6633

Restrict values in HTML input field at time of input?

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?)

Upvotes: 0

Views: 8747

Answers (5)

wongx
wongx

Reputation: 12267

It looks like it's not natively possible as an uncontrolled component and it needs to become a controlled component - 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.com/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>
  );
}

Upvotes: 0

scunliffe
scunliffe

Reputation: 63686

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.net/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 completely ignored regardless of the submit button/code style used. :-(

Upvotes: 2

Mahmoud
Mahmoud

Reputation: 936

you can try the following code:

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

Upvotes: 1

Ramanlfc
Ramanlfc

Reputation: 8354

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.com/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>

Upvotes: 1

jay
jay

Reputation: 134

thy this its work for me

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

Upvotes: 0

Related Questions