Can someone help me add validation function to both password and email and how do i call that in onChange event (there is already one which cant be eliminated)
there is one more functionality to be added (i.e) password and confirm password should have same inputs.

```
const passwordValidator = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{​10,}​$/;
const emailValidator = /^(([^<>()\[\]\\.,;:\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,}​))$/;

class Signup extends Component{​
  constructor(props){​
    super(props);

     this.handleMouseHover= this.handleMouseHover.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);

    this.state = {​
      isHovering: false,
      isDisabled : true,
      isFormValid:false,
      fname: '',
      lname: '',
      email: '',
      code:'',
      number:'',
      password: '',
      confirmPassword: '',
      isPasswordShown:'false',  
      isConfirmPasswordShown:'false',

    }​
  }​

  handleUserInput(e) {​
    const name = e.target.name;
    const value = e.target.value;
    this.setState({​ [name]: value }​);

  }​
  handleSubmit(e) {​
    e.preventDefault();
  }​

```

```

return (
    <div className={​styles.page}​>
    <form className={​styles.form}​>
         <h1 className={​styles.back}​> Back </h1>
        <h1 className={​styles.createhead}​>Create Account</h1>

        <div className ={​styles.email}​ >
        <p >Email ID <span className={​styles.star}​>*</span></p>
        <input
          className={​styles.emailtb}​
          type="email"
          placeholder="email@example.com"
          onChange={​(event) => this.handleUserInput(event) }​
            value={​this.state.email?this.state.email: ''}​
            name='email'
            id='email'
        />
        </div> 

        <div className={​styles.pwd}​>
        <p>Password <span className={​styles.star}​>*</span></p>
        <input
          className={​styles.pwdbox}​
          type={​(isPasswordShown) ? "password" : "text"}​
          onChange={​(event) => this.handleUserInput(event) }​
            id='password'
            value={​this.state.password?this.state.password:''}​
            name='password'
        />

        <div className={​styles.rpwd}​>
        <p>Re-enter Password <span className={​styles.star}​>*</span></p>
        <input
          type={​(isConfirmPasswordShown) ? "password" : "text"}​
          className={​styles.rpwdbox}​
          id="confirmPassword"
          name='confirmPassword'
          onChange={​(event) => this.handleUserInput(event)}​
            value={​this.state.confirmPassword}​
        />

        <div>
         <button
        type="submit"
         id="sub1"
         disabled= {​this.state.isDisabled || !this.state.fname || !this.state.lname || !this.state.email || !this.state.password || !this.state.confirmPassword || !this.state.code || !this.state.number }​ ** Button should be enabled only after all the validations are passed**
         className={​styles.createaccount}​ 
         type="submit">CREATE ACCOUNT</button>
        </div>

      </form>
    </div>

```