React form validation and UI library
This library has two components
- Input
- Form
Input can be used separately from the Form component, while the Form component makes use of the Input component.
Form checks to see whether all the Inputs have been passed validation and submits the form accordingly. At the moment custom inputs are not supported, as form data needs to be in the object to be validated.
npm install gc-react-form-validation
gc-react-form-validation exposes the stylesheets as both the original scss form
(lib/scss
) and the processed css form (lib/main.css
). Import either
in whichever way makes sense for your own project (e.g. via a webpack loader, or
via a scss entry point).
Below are variables available to override colour pallette:
$gc-form-light-grey: #e2e2e2;
$gc-form-grey: #f3f3f3;
$gc-form-med-grey: #cfcfcf;
$gc-form-dark-grey: #909090;
$gc-form-black: #44474b;
$gc-form-red: #c46e6b;
$gc-form-input-bg: #ffffff;
$gc-form-primary-colour: #e8bddb;
To change the font edit this variable:
$gc-form-font: 'Andale Mono', Tahoma !default;
To use Form Component.
import { Form } from 'gc-react-form-validation';
...
constructor(props) {
super(props);
this.state = {
serverErrors: [],
name: '',
lastName: '',
email: '',
birthdate: '',
favoriteAnimal: '',
multi: ['pheonix', 'goldfish'],
}
}
handleChange(value, name) {
// Receives input value and state name
this.setState({[name]: value});
}
formSubmitted() {
// Stuff to do once form is successfully validated
}
render() {
const today = new Date();
const thisYear = today.getFullYear();
const minAgeDate = new Date(thisYear - 5, 1, 1);
// Form data object.
const formFields = {
firstName: {
name: 'name', // Required
stateName: 'name', // Optional if missing name of object will be used e.g. firstName
type: 'text', // Required or validation
label: 'Name',
value: this.state.name, // Required
required: true
},
lastName: { // Minimum fields
type: 'text',
label: 'Surname',
value: this.state.lastName
},
email: {
type: 'email',
label: 'Email Address',
value: this.state.email,
customRegex: '/asdf@*/',
required: true
},
birthdate: {
type: 'date',
label: 'Date of Birth',
value: this.state.birthdate,
customErrorMessage: 'User must be at least 5 years old',
maxDate: minAgeDate,
},
favoriteAnimal: {
type: 'select',
label: 'Favourite Animal',
search: true,
required: true,
hidden: false,
value: this.state.favoriteAnimal,
options: [{
label: 'Unicorn',
value: 'unicorn'
}, {
label: 'Pheonix',
value: 'pheonix'
}, {
label: 'Dragon',
value: 'dragon'
}, {
label: 'Goldfish',
value: 'goldfish'
}]
},
multi: {
type: 'select',
label: 'Muliple Select Label',
value: this.state.multi,
multi: true,
search: true,
options: [{
label: 'Unicorn',
value: 'unicorn'
}, {
label: 'Pheonix',
value: 'pheonix'
}, {
label: 'Dragon',
value: 'dragon'
}, {
label: 'Goldfish',
value: 'goldfish'
}]
}
};
// Can add divs to place form objects
return (
<div>
<Form
data={formFields}
extendedClassNames="custom-classes"
submissionErrorMessages={this.state.serverErrors} // For displaying errors after submission
onSubmit={() => this.formSubmitted()}
onInputChange={(v, t) => this.handleChange(v, t)}>
{({ fields }) => (
<div>
{fields.firstName}
{fields.lastName}
{fields.email}
<div className="float-left">
{fields.birthdate}
</div>
{fields.favoriteAnimal}
{fields.multi}
<button>Submit Form</button>
</div>
)}
</Form>
</div>
);
}
If you want to use the Input component separately
import { Input } from 'gc-react-form-validation';
...
<Input
onChange={val => this.handleChange(val, 'text')}
value={this.state.text}
name="nameTxt"
placeholder="Type something that starts with a 'W'."
customRegex={/\bW/g}
customErrorMessage="Must start with uppercase W"
type="text"
/>
There are two ways of adding custom input components to the Form, ie. adding it to the Form template or adding it via the customComponent
input field object property if you are using a wrapper of some sort
To add custom UI Components to Form via the template, put the custom component inside the template with a reference to the field below it. The reference represents where the error validation message would appear.
In the field object add the prop customUI: true
to prevent the library UI from rendering.
The input would be validated everytime the input value changes.
customDatePicker: {
...
customUI: true,
type: 'date'
...
}
...
{({ fields }) => (
<div>
<CustomDatePicker/>
{fields.customDatePicker}
{fields.email}
<button>Submit Form</button>
</div>
)}
...
To add a custom input component via the customComponent
callback. The custom input component will be passed all the input properties including handleInputChange
and handleInputValidation
callbacks.
This method is best when dealing with more complicated form structures like when wrapping the form in its own wrapper to handle state and fields are created dynamically.
customDatePicker: {
...
customComponent: ({
value,
handleInputChange,
handleInputValidation
}) => (
<CustomDatePicker
date={value}
onChange={ newValue => handleInputChange(newValue)}
onBlur={() => handleInputValidation(value)} />
),
type: 'date'
...
}
...
{({ fields }) => (
<div>
{fields.customDatePicker}
{fields.email}
<button>Submit Form</button>
</div>
)}
...
Some more props you can use.
Property | Definition | Required | Options |
---|---|---|---|
type | Determines the type of validation and type of input to render | Required | text, email, password, date, range, name, textarea, select |
stateName | Accepts state variables to change the input name of input field object | Optional | |
customUI | Accepts boolean value | Optional | true, false (default) |
onChange | Pass function to handle state changes when input value is changed | Required | |
extendedClassNames | CSS class for adding custom styling. | Optional | |
value | Accepts values for input | Required | |
disabled | When disabled is false the input field is disabled |
Optional | true, false (default) |
maxLength | Maximum character length | Optional | |
minLength | Minimum character length | Optional | |
maxDate | Latest date, accepts date object | Optional | |
minDate | Earliest date, accepts date object | Optional | |
max | Highest accepted number | Optional | |
min | Lowest accepted number | Optional | |
autocomplete | Information for browser autocomplete | Optional | |
multi | When used with 'select' type allows for a multiple select list | Optional |
To add translations to the validation messages pass a translation object to the translations
prop of either the Form or Input component. If no translation object is found then default translations will be used.
Each key/value pair corresponds to text in the library and must return a function.
Here is an example of the expected translation object:
const translationsExample = {
invalidEmailAddress: () => 'This email address is invalid',
maxCharLength: max => `May not contain more than ${max} characters`,
minCharLength: min => `May not contain less than ${min} characters`,
invalidURL: () => 'This URL is invalid',
minPasswordCharLength: min => `Password may not contain less than ${min} characters`,
dateRange: (fromDate, toDate) => `Choose a date between ${fromDate.toDateString()} and ${toDate.toDateString()}`,
maxDateRange: toDate => `Choose a date earlier than ${toDate}`,
minDateRange: fromDate => `Choose a date later than ${fromDate}`,
maxNumber: max => `Choose a number lower than ${max}`,
minNumber: min => `Choose a number higher than ${min}`,
maxSelectOptions: max => `May not select more than ${max} options`,
minSelectOptions: min => `May not select less than ${min} options`,
requiredField: () => 'This is a required field',
defaultInvalidInput: () => 'Invalid input'
}
...
<Form
...
translations={translationsExample}
...
>
...
Gc-react-form-validation recently underwent an update with a few breaking changes.
The ui has also changed. Floating labels was removed in favour of bordered input containers.
handleInputChange
on the Form component becomesonInputChange
.isVisible
on the Input component is no longer used instead usehidden
.title
on the Input component is no longer used instead uselabel
.
stateName
is no longer required, instead input field object name will be used when nostateName
is provided.onInputValidationSuccess
andonFormValidationSuccess
are callbacks that can be passed to the Input and Form components, respectively, that get triggered when they are successfully validated. Useful for disabling submission buttons.onInputValidationFailure
andonFormValidationFailure
are callbacks that can be passed to Input and Form components respectively that are triggered when the Input or Form component fails validation.onInputValidationFailure
returns an error message relative to the input.onFormValidationFailure
returns an error object with all the errors in the Form component.
Last stable release before update: 0.7.83