CODEWITHSUNDEEP
javascripthtmlreactjs
Akhil Raghav
Akhil Raghav

Reputation: 343

How to check multiple validations for password conditions based onChange event fired in react js

Here is my input where I need to check the matches of validation types

lowerCase = (str) => {
  return /[a-z]/g.test(str);
};
upperCase = (str) => {
  return /[A-Z]/g.test(str);
};
isNumber = (str) => {
  var regex = /\d+/g;
  return regex.test(str);
};
islength = (str) => {
  return str.length > 2 ? true : false;
};
validationRules = (param) => {
  console.log("password", param);
  if (this.islength(param)) {
    this.setState({
      charLength: true
    });
  } else if (this.lowerCase(param)) {
    this.setState({
      loweCase: true
    });
  } else if (this.upperCase(param)) {
    this.setState({
      upperCase: true
    });
  } else if (this.isNumber(param)) {
    debugger;
    this.setState({
      number: true
    });
  } else {
    this.setState({
      charLength: false,
      lowerCase: false,
      upperCase: false,
      number: false,
    });
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.1/umd/react-dom.production.min.js"></script>

<input type="password" className="form-control custom_input" onChange={(e)=> this.validationRules(e.target.value)}/>
<div className="validation_rules">
  <p className="password_header mb-2">
    Your password must have
  </p>
  <ul>
    <li className={ !this.state.charLength ? "d-flex rules_invalid" : "d-flex rules_valid" }>
      8 or more characters
    </li>
    <li className={ !this.state.loweCase ? "d-flex rules_invalid" : "d-flex rules_valid" }>
      One lowercase letter
    </li>
    <li className={ !this.state.upperCase ? "d-flex rules_invalid" : "d-flex rules_valid" }>
      One Uppercase letter
    </li>
    <li className={ !this.state.number ? "d-flex rules_invalid" : "d-flex rules_valid" }>
      One number
    </li>
  </ul>
</div>

Here the rules should be highlighted based on this.validationRules() And I agree my logic is wrong can anyone help me with correct logic and there is no css issues if you are facing any please ignore it

Upvotes: 1

Views: 468

Answers (1)

tobiasfried
tobiasfried

Reputation: 1842

You can combine the steps of computing each validation step and setting the state into one statement:

validationRules = (param) => {
  console.log("password", param);
  this.setState({
    charLength: this.islength(param),
    lowerCase: this.lowerCase(param),
    upperCase: this.upperCase(param),
    number: this.isNumber(param),
  });
};

EDIT: also FYI, return str.length > 2 ? true : false; can just be shortened to return str.length > 2;

Upvotes: 1

Related Questions