ReactJS Form Input - can't get a "const" variable in validation function

user_10937935 0
Viewed 85

I'm trying to compare two inputs - password and password confirmation. For each input I have a function where I return alert. Solution that I have is from this tutorial in Register Page. I'm new in ReactJS and don't understand everything, but here is my code sample:

<Form onSubmit={handleRegister} ref={form}>
  {!successful && (
    <div>
      <div className="form-group">
        <label htmlFor="password"></label>
        <Input
          type="password"
          className="form-control"
          placeholder="Password"
          name="password"
          value={password}
          onChange={onChangePassword}
          validations={[required, vpassword]}
        />
      </div>

      <div className="form-group">
        <label htmlFor="passConfirm"></label>
        <Input
          type="password"
          placeholder="Confirm password"
          className="form-control"
          name="passConfirm"
          value={passConfirm}
          onChange={onChangePassConfirm}
          validations={[required, vPassConfirm]}
        />
      </div>

      <div className="form-group">
        <button className="btn btn-primary btn-block" id="registerButton">Register</button>
      </div>
    </div>
  )}
  
  {message && (
    <div className="form-group">
      <div
        className={ successful ? "alert alert-success" : "alert alert-danger" }
        role="alert"
      >
        {message}
      </div>
    </div>
  )}
  <CheckButton style={{ display: "none" }} ref={checkBtn} />
</Form>

and there I pass this function:

const vPassConfirm = (value) => {
  console.log(password);
   if (value != password) {
     return (
       <div className="alert alert-danger" role="alert">
         The password does not match!
       </div>

     );
   }

In this vPassConfirm I want to compare my variables

const[password, setPassword] = useState("");
const[passConfirm, setPassConfirm] = useState("");

but in:

console.log(password)

I get only null or something like that - its empty. I cant get the variable. My question is - is there a possibility to get this variable 'password' inside vPassConfirm function?

EDIT

const onChangePassword = (e) => {
  const password = e.target.value;
  setPassword(password);
};

const onChangePassConfirm = (e) => {
  const passConfirm = e.target.value;
  setPassConfirm(passConfirm);
};

there is a declaration above:

const form = useRef();
const checkBtn = useRef();

I use react-valiadtion

reactjs
1 Answers

After reviewing the documentation for react-validation, it seems you can use the additional arguments passed to validation functions to check other form values.

Validation functions accept (at least) the arguments: value, props, components. Values for other inputs can be found in the components argument.

Here's how you can update your vPassConfirm function so that it checks the current value of the password input:

const vPassConfirm = (value, props, components) => {
  if (value !== components['passConfirm'][0].value) {
    return (
      <div className="alert alert-danger" role="alert">
         The password does not match!
       </div>
    )
  }
};

If you want a validation function that would work for either the password or passConfirm input, you could change the conditional line to:

components['password'][0].value !== components['passConfirm'][0].value
user_80686250
Related