Warning "Please enter 8 characters" and "Both passwords should match" pops up already as soon as started typing

Question

I want to notify that " both passwords should match" and "Please enter 8 characters" after typing is it possible? Also an existing issue after entering with less than 8 characters password it will notify "please enter 8 characters" and still proceed to reset password. Can anyone discuss it to me how to prevent it and how to notify the warnings after finished typing?

useEffect(() => {
    if (forgetSuccess) {
      notify("success", "Password changed successfully");
      history.push("/login");
    }
    if (forgetError) {
      notify("error", forgetError);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [props]);

  const handlePassword = (e) => {
    setPassword(e.target.value)
    var minimumPass = 8
    var newPass = e.target.value
    if (newPass.length < minimumPass) {
      setError("Password should have atleast 8 characters");
    }else{
      setError('')
    }
  };

  const handleConfirmPassword = (e) => {
    setConfirmPassword(e.target.value);
    if (password !== e.target.value) {
      setError("Both Passwords should match");
    } else if (e.target.value.length < 8) {
      setError("Password should have atleast 8 characters");
    }else{
      setError("")
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault()
    if (password && password === confirm_password) {
      if (resetPassword) resetPassword(secret, password);      
    }
  };

  return (
    <div className={styles.root}>
      <div className={styles.left_side}>
        <Link to="/">
          <div className={styles.logo_container}>
            <img src={logo} alt="logo" className={styles.logo} />
            <picture>
              <source srcSet={AutopilotWhite} media="(prefers-color-scheme: dark)" />
              <img alt="autopilot" src={Autopilot} />
            </picture>
          </div>
        </Link>
        <p className={styles.forgot_text}>Reset Your Password</p>
        <p className={styles.forgot_message}>Set your new password and confirm it</p>
        <p className={styles.error_message}>{error} </p>
        {errorValidation && (
          <Alert severity="error" style={{ width: "400px", marginBottom: "20px" }}>
            {errorValidation}
          </Alert>
        )}
        <form onSubmit={handleSubmit} className={styles.form}>
          <input type="password" placeholder="Enter Password" className={styles.email_address} value={password} onChange={(e) => handlePassword(e)} />
          <br />
          <br />
          <input type="password" placeholder="Confirm Your Password" className={styles.email_address} value={confirm_password} onChange={(e) => handleConfirmPassword(e)} />
          <Button type="submit" className={`${styles.forgot_button} ${loading && styles.forgot_button_disabled}`} onClick={handleSubmit}>
            {loading !== true ? <span>Save Password</span> : <span>Processing...</span>}
          </Button>
        </form>
      </div>
      <div className={styles.right_side}>
        <Slider />
      </div>
    </div>
  );
};

https://stackoverflow.com/questions/42217121/how-to-start-search-only-when-user-stops-typing — Ashish Kamble, Nov 22 '21 at 06:16
@AshishKamble can you show how its done using the useEffect? with the conditional statements? — John Alesi Resurreccion, Nov 22 '21 at 09:46

score 0 · Answer 1 · answered Nov 22 '21 at 10:30

This could be yoour solution to use debounce library, till wait user to write complete inside input tag,

npm i use-debounce --save

import statements are,

import { useDebounce } from 'use-debounce';
const [valuePassword] = useDebounce(password, 1000);
const [valueConfirmPassword] = useDebounce(confirmPassword, 1000);

then change your html return code to this,

<form onSubmit={handleSubmit} className={styles.form}>
  <input type="password" placeholder="Enter Password" className={styles.email_address} value={valuePassword} onChange={(e) => handlePassword(e)} />
  <br />
  <br />
  <input type="password" placeholder="Confirm Your Password" className={styles.email_address} value={valueConfirmPassword} onChange={(e) => handleConfirmPassword(e)} />
  <Button type="submit" className={`${styles.forgot_button} ${loading && styles.forgot_button_disabled}`} onClick={handleSubmit}>
    {loading !== true ? <span>Save Password</span> : <span>Processing...</span>}
  </Button>
</form>

and then you can change functions to, let them use debounce value

const handlePassword = (e) => {
  setPassword(e.target.value)
  var minimumPass = 8
  var newPass = e.target.value
  if (newPass.length < minimumPass) {
    setError("Password should have atleast 8 characters");
  }else{
    setError('')
  }
};

const handleConfirmPassword = (e) => {
  setConfirmPassword(e.target.value);
  if (valuePassword !== e.target.value) {
    setError("Both Passwords should match");
  } else if (e.target.value.length < 8) {
    setError("Password should have atleast 8 characters");
  }else{
    setError("")
  }
};

I tried this approach but the debounce seems to be not working It still pops up as I start typing the passwords — John Alesi Resurreccion, Nov 22 '21 at 12:52

Warning "Please enter 8 characters" and "Both passwords should match" pops up already as soon as started typing

1 Answers1