React - adding email validation to empty input validation

Question

In React, I'm looking to add email validation (checks for @ and .com) to a form that currently checks for empty input fields.

I found this that does the job but can't figure out how to connect it to onSubmit along w/ my other validation.

Here's the link to this project's codepen for complete code.

Setting initial State for inputs and errors:

constructor() {
super();
this.state = {
  inputs: {
    name: '',
    email: '',
    message: '',
  },
  errors: {
    name: false,
    email: false,
    message: false,
  },
};

}

JS Handling Input, onBlur

updateInput = e => {
this.setState({
  inputs: {
    ...this.state.inputs,
    [e.target.name]: e.target.value,
  },

  errors: {
    ...this.state.errors,
    [e.target.name]: false,
  },
});
};

handleOnBlur = e => {
const { inputs } = this.state;
if (inputs[e.target.name].length === 0) {
  this.setState({
    errors: {
      ...this.state.errors,
      [e.target.name]: true,
    },
  });
}
};

What's the problem? You have a code sample that works, why aren't you just following that? — James
– James, Commented Jun 19, 2019 at 21:57
@EricNguyen see my solution below. Let me know if you have any questions. :) — Cat_Enthusiast
– Cat_Enthusiast, Commented Jun 19, 2019 at 23:00

Cat_Enthusiast · Accepted Answer · 2019-06-19 22:20:23Z

1

Without refactoring too much of your code, we can just update the updateInput() function to this:

  updateInput = event => {
    const { name, value } = event.target;

    if (name === "email") {
      this.setState({
        inputs: {
          ...this.state.inputs,
          [name]: value
        },
        errors: {
          ...this.state.errors,
          email:
            value.includes("@") &&
            value.slice(-4).includes(".com")
              ? false
              : true
        }
      });
    } else {
      this.setState({
        inputs: {
          ...this.state.inputs,
          [name]: value
        },
        errors: {
          ...this.state.errors,
          [name]: false
        }
      });
    }
  };

Also see sandbox: https://codesandbox.io/s/conditional-display-input-errors-vfmh5

answered Jun 19, 2019 at 22:20

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

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

Comments

harisu · Accepted Answer · 2019-06-19 22:56:48Z

one possible way is to add a conditioning to your code like so

if((e.target.name === "email") && !this.validateEmail(inputs[e.target.name]) && (inputs[e.target.name].length !== 0 )   ){
     this.setState({
        errors: {
          ...this.state.errors,
          [e.target.name]: true,
        },
      }); 
    }        
 so after generally you will have something like this that add the validate function

validateEmail (email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    return re.test(email)
  } 

then your  unblur function will look like this

handleOnBlur = e => {
    const { inputs } = this.state;


     if (inputs[e.target.name].length === 0) {
       this.setState({
        errors: {
          ...this.state.errors,
          [e.target.name]: true,
        },
       });
      }
     if((e.target.name === "email") && !this.validateEmail(inputs[e.target.name]) && (inputs[e.target.name].length !== 0 )   ){
      this.setState({
        errors: {
          ...this.state.errors,
          [e.target.name]: true,
        },
      }); 
    }


  };

Mr. Poopybutthole · Accepted Answer · 2023-06-21 14:59:25Z

0

Just modify the input Tag if you're using React and add required keyword at the end of the Tag.

<input
     className='p-3 flex w-full rounded-md text-black'
     type='email'
     name='Email'
     placeholder='Enter Email'
        required/>

It also should be inside a form Tag and a button of type='submit' v

answered Jun 21, 2023 at 14:59

Mr. Poopybutthole

3943 silver badges7 bronze badges

Collectives™ on Stack Overflow

React - adding email validation to empty input validation

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related