How to integrate multiple functions to one input field?

Question

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 protected]"
          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>

inside your handleUserInput you can call another function to validate . validateInput(name, value) . Now in the validateInput based on the name . — Shyam
– Shyam, Commented Jun 3, 2021 at 11:22
You don't need a new function instead a condition. Add a new condition in your hander for the case that both passwords are not the same. — keremistan
– keremistan, Commented Jun 3, 2021 at 11:36

Sabir · Accepted Answer · 2021-06-03 11:22:20Z

1

You can bind one method with any event but from that binded method you can call any number of method like below

 <input
      type={(isConfirmPasswordShown) ? "password" : "text"}
      className={styles.rpwdbox}
      id="confirmPassword"
      name='confirmPassword'
      onChange={(event) => {
           this.handleUserInput(event)
           // call your other methods here
       }
      }
      value={this.state.confirmPassword}
    />

answered Jun 3, 2021 at 11:22

Sabir

1793 bronze badges

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

Comments

keremistan · Accepted Answer · 2021-06-03 11:51:06Z

0

Assuming you are already calling you onClick handler

Objective: check if both passwords are the same. If they are, continue. if not the same, do other stuff.

// inside your onClick handler
if (pass !== passConfirm){
    // whatever you want to do with invalid input
    displayError('passwords do not match')
}
// continue with the normal control flow if passwords are the same

Anything more than this will be unnecessary work on your part. As we know, every line of unnecessary code will be a cause of headache later on.

answered Jun 3, 2021 at 11:51

keremistan

4647 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to integrate multiple functions to one input field?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related