README
VALID REACT FORM
Click here for DEMO
Easy form validations with customizable components, error handling and payload generator, that can be used for AJAX.
note: documentation in progress :)
Installation
Valid React Form is available as npm package.
npm install valid-react-form
Usage
1. Include it in your project
import React from 'react';
import ReactDOM from 'react-dom';
import {ValidForm, Field, ValidStyles } from 'react-valid-form';
const App = () => (
<ValidStyles>
<ValidForm>
<Field label='Some label'
placeholder='placeholder text'
name='field1'
friendlyName='Sample field'
required={true}
valdator={length: (val) => val.length > 3}
errorMessages: {
length: 'It should be more than 3 characters',
required: 'This is required'
}
/>
</ValidForm>
</ValidStyles>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
Note that this library comes with styling component ValidStyles. It is recommended to use this component. You can easily override colors and constants. However all components have class names defined, so you can style them with your own CSS styles - in that case don't use ValidStyles wrapper
ValidStyles example
// you can customize these
const customStyles = {
/**
primaryColor
secondaryColor
lightColor
borderColor
darkColor
tooltipColor
errorColor
componentBackground
itemSize
borderRadius
borderWidth
gap
smallGap
fontSize
transition
fontFamily
**/
}
<ValidStyles customStyles={customStyles}>
{/* form component will go here */}
</ValidStyles>
2. Add ValidForm component
function onSubmitCallback(payload){
console.log(payload);
}
<ValidForm readOnly={someSwitch}
errorPanel={true}
onSubmit={onSubmitCallback}
debug={true}
extended={{ extended: 'extended_data' }}
errors={..}
autoComplete='off' >
{/* children components like Field etc... will go here */}
</ValidForm>
- readOnly: if true form and all children components will switch to read only mode
- errorPanel: this is false by default and all error messages are below failed field. If this is true error messages will move into one common panel above entire form
- debug: if true developer debug window will be shown under form displaying your payload and form state
- onSubmit: function name that should be called after submit (payload as first parameter)
- extended: you can feed the form with some additional data (object)
- errors: to display error for any field just provide an object with name of the field as key and error message as value ( field1: 'Delayed error returned...' )
3. Add children components
Field component
const errorMessages = {
required: 'This field is required, please add some value',
length: 'This field should be at least 3 chars long',
isNum: 'Only Numbers please',
};
const myCallback = (newValue) => {
// some callback
};
<Field name='field2'
friendlyName='Required field2'
label='Field2 label'
placeholder='placeholder text'
errorMessages={errorMessages}
helper='This is helper tooltip text example'
validator={
isNum: (val) => /([0-9])/g.test(val),
length: (val) => val.length > 3
}
readOnly={false}
disabled={false}
icons={true}
onChange={myCallback}
debounce={200}
required={true}/>
- name* : this is required prop (should be unique name - it is used in form payload)
- friendlyName: is used only in common form error panel (only fill it when you used
errorPanel
prop on form element) - label: will add label above field
- readOnly: if true component will switch to read only mode
- errorMessages: this can be just a string or an object with names of validators as keys and error messages as values
- required: if true field will be invalid while empty
- validator: object with validation functions goes here. every key is used to resolve error meesage from
errorMessages
prop - icons: if true validation icons will appear
- helper: small question mark sign with tooltip will appear
- onChange: input change callback function goes here
- debounce: onChange callback delay (in milliseconds)
Select component
TODO DOCS - meanwhile check DEMO
Toggle component
TODO DOCS - meanwhile check DEMO
Button component
TODO DOCS - meanwhile check DEMO
Valid (universal) component
TODO DOCS - meanwhile check DEMO