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

Question

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

tobiasfried · Accepted Answer · 2020-10-16 07:14:27Z

1

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;

edited Oct 16, 2020 at 7:14

answered Oct 16, 2020 at 7:04

tobiasfried

1,90212 silver badges23 bronze badges

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

1 Comment

tobiasfried Over a year ago

No worries! glhf

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related