@brocode/simple-react-form-validation-helper
v1.0.3
Published
Lightweight package which helps in implementing simple and generic form validations.
Downloads
2
Readme
simple-react-form-validation-helper
---- How to use it? ----
- Install validator using npm:
npm i @brocode/simple-react-form-validation-helper
- Import validator in your component.
- Use the validation functions in your component on
onChange
andonBlur
events of your input fields. - example: validating an email field:
// import validator
import validator from "@brocode/simple-react-form-validation-helper";
const sampleForm = () => {
// use states to store the input value and error message
const [email, setEmail] = useState("");
const [emailError, setEmailError] = useState("");
return (
<>
{/* Inside your form */}
<label>Email address</label>
<input
type="email"
value={email}
onChange={(e) => {
setEmail(e.target.value);
validator.emailInputChangeHandler(e.target.value, setEmailError);
}}
onBlur={(e) => {
validator.emailInputBlurHandler(e.target.value, setEmailError);
}}
/>
{/* Your error message goes here */}
<span className="text-danger fs-6">{emailError}</span>
</>
);
};
export default sampleForm;
---- Validator types ----
- Name
- Phone Number
- Password
- Address
- Postal-code
- Price
- Percentage
Note: Use input type="text"
of while validating phone number, postal-code and percentage.
---- Found a bug? ----
Feel free to open an issue on github.
---- Want to contribute? ----
Great! fork this repository and make a pull request😊.