Reputation: 6633
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
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
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
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
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
Reputation: 134
thy this its work for me
<input type="text" name="number" minlength='1' maxlength="9" required>
Upvotes: 0