Chrome Extension

Email Validation on Field Redux Form

You can pass your email validation regex function to validate attribute of redux form Field and it will check the email validation when you type any email.
import React from 'react'
import { Field, reduxForm } from 'redux-form'

const emailValidation = value =>
  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
  'Invalid email address' : undefined

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

const EmailValidationForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field 
        name="email" 
        type="email"
        component={renderField}
        label="Email"
        validate={emailValidation}
      />
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Reset</button>
      </div>
    </form>
  )
}

export default reduxForm({
  form: 'EmailValidationForm'
})(EmailValidationForm)
Code faster with devsheet chrome extension and increase productivity as a programmer
search code from your favorite search engine instantly.
Install Now

The code will show an error message while typing in the email field if you have entered the wrong email.

Was this helpful?
0 Comments
Open Code Manager We are hiring