2022-03-21

Custom validation in react-bootstrap forms not working

I'm trying to add custom validation logic to my react-bootstrap forms, but isInvalid doesn't seem to be respected. As soon as validated={true} is set on the form, it always validates non-empty strings, regardless of isValid or isInvalid. The invalid message is displayed, but the field shows as green. See here:

enter image description here

Here is the offending code:

 <Form noValidate validated={formValidated} id="bidForm">
    <Form.Group className="mb-3" controlId="formBasicBidding">
       <Form.Label>Bid Amount</Form.Label>
       <InputGroup hasValidation className="mb-3">
           <InputGroup.Text id="inputGroupPrepend">$</InputGroup.Text>
           <Form.Control
              required
              value={bidAmount}
              isInvalid={!(parseInt(bidAmount) > 0) && formValidated}
              onChange={e => setBidAmount(e.target.value)}
           />
           <InputGroup.Text id="inputGroupAppend">.00</InputGroup.Text>
           <Form.Control.Feedback type="invalid">
               Please select a dollar amount {`>`} 0
           </Form.Control.Feedback>
        </InputGroup>
    </Form.Group>
    <...>
</Form>

I was able to get it to work using a pattern= regex on the input, but I'm planning to do more complex validation where a regex won't be sufficient. How can I get react-bootstrap to follow isValid and isInvalid properly? Thanks!



No comments:

Post a Comment