ReactJS - How do I validate input fields

Question

I'm using reactstrap components. there is more than one input. how do I set some fields to "required". that is, the user cannot pass idle. how can such restrictions be made?

<Row>
   <Col xs="2">customer name</Col>
   <Col xs="6">
        <Input
        required
        maxLength={"20"}
        type={"text"}
        placeholder={"customer name"}
        name={"customerName"}
        defaultValue={this.state.customerName}
        onChange={this.handleChange}
        />
   </Col>
</Row>

Ionut S. · Accepted Answer · 2019-10-20 19:49:26Z

1

Did you try this one: https://availity.github.io/availity-reactstrap-validation/ ? Does a pretty good job.

Sorry to write here, but it seems at don't have enough reputation to answer.

availity-reactstrap-validation extends the reactstrap forms with some nice functions like validation.

In order to have labels on left and inputs on right you can mix them like this:

<AvForm onValidSubmit={handleValidSubmit} onInvalidSubmit={handleInvalidSubmit}>
        <FormGroup row>
            <Label for="name" sm={2}>Name</Label>
            <Col sm={10}>
                <AvField name="name"  type="text" required />
            </Col>
        </FormGroup>

    </AvForm>

Be sure that you have imported all the libraries.

edited Oct 20, 2019 at 19:49

answered Oct 20, 2019 at 18:35

Ionut S.

514 bronze badges

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

4 Comments

Fatih mzm Over a year ago

I'm trying now,

Fatih mzm Over a year ago

I will use it, but how can I make the label on the left and the input on the right

Ionut S. Over a year ago

Pretty easy man, here is my quick example, i have it in a component: return ( <AvForm onValidSubmit={handleValidSubmit} onInvalidSubmit={handleInvalidSubmit}> <AvField name="name" label="name" type="text" required /> <Button color="primary">Add name</Button> </AvForm> ) and the output is: <div class="form-group"><label for="name" class="">name</label><input name="name" required="" id="name" type="text" class="is-untouched is-pristine av-invalid form-control" value=""></div> - pretty basic bootstrap.

Ionut S. Over a year ago

hey man, i got what you asked for, check my initial answers, i have update it.

Collectives™ on Stack Overflow

ReactJS - How do I validate input fields

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related