Welcome to Password Validate

Use this React component to create a password and password confirm fields that will validate password entries and display errors for invalid entries.

The component has two input fields to validate entries from the user and the following requirements:

• Password has a min length of 6 characters
• Password has at least 1 uppercase character
• Password has at least 1 lowercase character
• Password has at least 1 number
• Password has at least 1 special character (!@#$%^&*()_-+={[}]|:;"'<,>.)
• Password and Password confirm inputs must match

It also has a submit button that will trigger validation and present success or why the password entry failed

To install

npm install https://github.com/gehupierre/password-validator

To use in React

import { PasswordField } from "@gehupierre/password-validator";

const args = {
  label: "Type your password",
  label_confirm: "Confirm your password",
};

<PasswordField {...args} />;

Advanced settings

Validation event listener

To listen for validation event on input use, onValidate argument in component. The is will return a boolean value as the first argument for validation result: true for valid, false for invalid. And it returns a string for the second argument for the value entered.

...
const args = {
  ...,
  onValidate: (isValid, value) => console.log(isValid, value)
};

<PasswordField {...args} />;

Enable autorun

To run validation on input change event, pass argument, autorun=true to component.

...
const args = {
  ...,
  autorun: true
};

<PasswordField {...args} />;

Custom styling

Coming soon

Custom validation messages

Coming soon

License

MIT License