How can I implement field validation with Formik?

Question

I'm using ReactJs in my project. I have my form and I need to implement a validation in each field. The email should match some pattern("@" for example), name should be a string and fields can't be empty etc. Thanks. Above there're my Json file, my form, my render and my rows.

And I'm using a json as my backend:

{
  "member": [
    {
      "id": 1
      "avatar": "https://randomuser.me/api/portraits/men/58.jpg",
      "name": "Harry Potter",
      "email": "harrypotter@harry.com",
      "project": "Kill Voldemort",
      "devices": "Wand",
      "mainstack": "React",
      },   
    

My form:

renderForm() {
        return (
            <div className="form">
                <div className="row">
                <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Profile Picture</label>
                            <input type="text" className="form-control"
                                name="avatar"
                                value={this.state.member.avatar}
                                onChange={e => this.updateField(e)}
                                
                                placeholder="profile picture" />
                        </div>
                    </div>


                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Name</label>
                            <input type="text" className="form-control"
                                name="name"
                                value={this.state.member.name}
                                onChange={e => this.updateField(e)}
                                placeholder="name" />
                        </div>
                    </div>

                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Email</label>
                            <input 
                                type="text" 
                                className="form-control"
                                name="email"
                                value={this.state.member.email}
                                onChange={e => this.updateField(e)}
                                onblur={e => this.validateField(e)}
                                placeholder="email" />
                        </div>
                    </div>

                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Project</label>
                            <input type="text" className="form-control"
                                name="project"
                                value={this.state.member.project}
                                onChange={e => this.updateField(e)}
                                placeholder="project" />
                        </div>
                    </div>

                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Devices</label>
                            <input type="text" className="form-control"
                                name="devices"
                                value={this.state.member.devices}
                                onChange={e => this.updateField(e)}
                                placeholder="devices" />
                        </div>
                    </div>

                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Main Stack</label>
                            <input type="text" className="form-control"
                                name="mainstack"
                                value={this.state.member.mainstack}
                                onChange={e => this.updateField(e)}
                                placeholder="mainstack" />
                        </div>
                    </div>
                </div>

                <hr />
                <div className="row">
                    <div className="col-12 d-flex justify-content-end">
                        <button className="btn btn-primary"
                            onClick={e => this.save(e)}>
                            Save
                        </button>

                        <button className="btn btn-secondary ml-2"
                            onClick={e => this.clear(e)}>
                            Cancel
                        </button>
                    </div>
                </div>

            </div>
        )
    }

My table:

renderTable() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Profile Pictute</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Project</th>
                        <th>Devices</th>
                        <th>Main Stack</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {this.renderRows()}
                </tbody>
            </table>

        )    
    }   

My rows:

renderRows(){
    return this.state.list.map(member => {
        return (
            <tr key={member.id}>
                <td><div className="avatar">
                <img src={member.avatar} alt={member.name} /> 
                    </div>
                </td>
                <td>{member.name}</td>
                <td>{member.email}</td>
                <td>{member.project}</td>
                <td>{member.devices}</td>
                <td>{member.mainstack}</td>
                <td>
                    <button className="btn btn-warning"
                        onClick={() => this.load(member)}>
                        <i className="fa fa-pencil"></i>
                    </button>
                    <button className="btn btn-danger ml-2"
                        onClick={()=>{this.confirmRemove(member)}}>
                        <i className="fa fa-trash"></i>
                    </button>
                </td>    
            </tr>
        )
    })
}
    render () {
        return (        
            <Main>
                {this.renderForm()}
                {this.renderTable()}
                <Helmet>
                <title>Add Member</title>
                </Helmet>   
            </Main>                  
                
        )
    }
}

Answer 1

I dont think React has any built-in form validation, unlike Angular.

Now, the silver lining, is that you can approach validation in different ways, depending on your use case, for example you can define your custom input component with validation features, or you could use some existing library to do some of the heavy lifting for you.

Having said that I believe you'd be interested in the later, using an library, you could have a look at Formik and this article Validating a form in React

Answer 2

If you just want validation like if it is email or not just use html email field instead of text field. And for few more validations Better add JavaScript functions that would validate at the client side itself first before coming for further validation.