How to validate Forms Controls to use only numeric values with react-bootstrap

Question

I need to allow only to enter numeric values in my Form.Control with react-bootstrap. Also, I need to give a maximum length to the control.

I have tried using type="number" and maxLength="10", but it allows me to enter more than 10 digit and there is a default style that applies to the control with two arrows to increase and decrease the number, which I don't want.

<Form> 
<Form.Group>
<Form.Control
    className="mobileBox"
    required
    name="mobile"
    type="number"
    maxLength="10"
    value={props.mobile}
    onChange={props.onChange}
/>
</Form.Group>
</Form>

Sameera Chathuranga · Accepted Answer · 2019-07-02 08:52:43Z

4

you can remove the spin boxes for number increase and decrease by adding this CSS style

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

edited Jul 2, 2019 at 8:52

answered Jul 2, 2019 at 8:44

Sameera Chathuranga

3,6563 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hasantha Over a year ago

Thanx Sameera. Styling issue got fixed. But for the max length issue, I think I may need to write a custom validation, because for type="number" the maxlength property gets ignored.

Lex V Over a year ago

Hi Hasantha, I also have the same issue. Did you solve your issue? If it yes Please share the code, it may helpful

Collectives™ on Stack Overflow

How to validate Forms Controls to use only numeric values with react-bootstrap

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related