CODEWITHSUNDEEP
reactjsvalidationreact-bootstrap
Hasantha
Hasantha

Reputation: 117

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

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>

Upvotes: 4

Views: 12908

Answers (1)

Sameera Chathuranga
Sameera Chathuranga

Reputation: 3666

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; 
}

Upvotes: 4

Related Questions