daruj/react-awesome-form-validator

This is a nice tool to validate forms using react

Damian Aruj ·

React Awesome Form Validation

This library is a simple solution of a common issue with forms with custom validations using ReactJs. It lets you use a pre-defined Input or even create your custom one with all it needs to be part of the same form.

Examples

Simple Form: Code Here

• run: npm run simple-form

Form with custom Input: Code Here, Custom Input

• run: npm run form-with-custom-input

Form with reset and clear values: Code Here

• run: npm run form-with-reset-and-clear-values

Then open a browser and type: http://localhost:3000

Form Props:

Name	Type	Default	Description	Required
children	node/string	-	Form inputs or other html tags or strings	-
className	string	''	Form className	false
resetForm	boolean	-	if true will reset the form of default values. In order to use this prop you need to add formWasReset too.	false
formWasReset	function	-	Function to be called right after we reset the form. The idea of this prop is to change the 'resetForm' prop to false again. example: formWasReset={() => this.setState({ resetForm: false })}	false
onSubmit	function	-	When the user clicks on the SubmitButton and all the validations pass, it will call this method and it will pass an object with all the form's inputs values.	true
onReset	function	-	When the user clicks on the ResetButton and all the validations pass, it will call this method and it will reset the form values.	false
disableInputs	boolean	-	If true it will disable all fields. This prop is very useful for when we call the onSubmit method.	false
clearValuesOnReset	boolean	-	If True it will reset and clear all values	false
serverErrors	object	-	Object to display errors from the server. example: serverErrors={{ email: 'This email exist, please use another one' }}	false

Input Props:

Name	Type	Default	Description	Required
type	string	text	Input type	true
name	string	-	Input name and ref	true
placeHolder	string	-	Input PlaceHolder	false
label	string	-	Label to be displayed within the input	false
customLabel	node	-	Label to be displayed within the input	false
startValidatingWhenIsPristine	boolean	false	if true the input will start validating immediately as you start typing	false
className	string	''	Input className	false
fieldClassName	string	''	Every Input comes wrapped with a div. This is the div className	false
invalidClassName	string	''	className for the input when does not pass its validations	false
onChange	function	-	We store internally on this library every input value and when you click on the SubmitButton and you pass all the validations it will call the method provided on the SubmitButton and it will pass an object with all the input values. Let's say you need to do something with the input value before the user clicks on SubmitButton, then you can get the its value with this prop.	false
onBlur	function	-	Same as onChange	false
validate	function	-	You have to return an object with the following structure: { valid, errorMessage } where valid is a boolean and errorMessage is a string.	false
serverValue	string	''	Value coming from the server	false
readOnly	bool	false	if true will set the input as read only	false

SubmitButton Props:

Name	Type	Default	Description	Required
children	node/string	-	Button text	true
className	string	''	Button className	false
fieldClassName	string	''	This Button comes wrapped with a div. This is the div className	false
disabledUntilFormIsValidated	boolean	false	It will disable the button until all fields are valid	false

CustomSubmitButton Props:

Name	Type	Default	Description	Required
children	node/string	-	Submit Button	true

ResetButton Props:

Name	Type	Default	Description	Required
children	node/string	-	Button text	true
className	string	''	Button className	false
fieldClassName	string	''	This Button comes wrapped with a div. This is the div className	false
clearValues	boolean	-	If True it will reset and clear all values	false

CustomResetButton Props:

Name	Type	Default	Description	Required
children	node/string	-	Reset Button	true
clearValues	boolean	-	If True it will reset and clear all values	false

Hope you enjoy it!