Breaking News: Grepper is joining You.com. Read the official announcement!

react redux form validation

Raymund Alum answered on July 14, 2022 Popularity 8/10 Helpfulness 1/10

answer react redux form validation

react redux form validation

Comment

-1

import React from 'react';
import { Field, reduxForm } from 'redux-form';
const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
<div>
<label className="control-label">{label}</label>
<div>
<input {...input} placeholder={label} type={type} className="form-control" />
{touched && ((error && <span className="text-danger">{error}</span>) || (warning && <span>{warning}</span>))}
</div>
</div>
)

const validate = values => {
const errors = {}
if (!values.firstName) {
errors.firstName = 'Required'
} else if (values.firstName.length < 2) {
errors.firstName = 'Minimum be 2 characters or more'
}
if (!values.email) {
errors.email = 'Required'
} else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid email address'
}
if (!values.lastName) {
errors.lastName = 'Required'
} else if (values.lastName.length < 2) {
errors.lastName = 'Minimum be 2 characters or more'
}
return errors
}

let FormCode = props => {
const { handleSubmit, pristine, submitting } = props;
return (
<form onSubmit={ handleSubmit }>
<div className="form-group">
<Field name="firstName" component={renderField} label="First Name" />
</div>
<div className="form-group">
<Field name="lastName" component={renderField} label="Last Name" />
</div>
<div className="form-group">
<Field name="email" component={renderField} label="Email" />
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary">Submit</button>
</div>
</form> )}


FormCode = reduxForm({
form: 'contact',
validate
})(FormCode);

export default FormCode;

Popularity 8/10 Helpfulness 1/10 Language javascript

Source: notes.io

Tags: javascript react-redux-form validation

Link to this answer
Share Copy Link

Contributed on Jul 14 2022

Raymund Alum

0 Answers Avg Quality 2/10

react redux form validation

Contents

More Related Answers

react redux form validation

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.