Search code snippets, questions, articles...

Apply required field validation on redux form fields

You can simply create a required validation function and pass it to validate attributes of redux form fields to apply the required field validation on that field.
import React from 'react'
import { Field, reduxForm } from 'redux-form'

const requiredValidator = value => value ? undefined : 'Required'

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
      <input {...input} placeholder={label} type={type}/>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}

const FieldLevelValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="firstname" type="text"
        component={renderField} label="First Name"
        validate={[ requiredValidator ]}
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Reset</button>

export default reduxForm({
  form: 'fieldLevelValidation' // a unique identifier for this form
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool
Was this helpful?