0.0.35 • Published 5 years ago
recassfov v0.0.35
recassfov
React Client and Server Side Form Validation
Usage
Install library.
# with yarn
$ yarn add recassfov
# or with npm
$ npm i recassfov
Import library.
import { Form, Input } from 'recassfov'
Create validation rules. (Validator.js)
const validations = {
username: [
{
rule: 'isLength',
args: { min: 4, max: 32 },
invalidFeedback: 'please provide a username (min: 4, max: 32)'
}
],
email: [
{
rule: 'isEmail',
invalidFeedback: 'please provide a valid email'
}
],
message: [
{
rule: 'isLength',
args: { min: 1 },
invalidFeedback: 'please provide a message'
}
]
}
Build your form.
<Form postUrl='http://site.com/post'>
<div>
<Input
type='text'
name='username'
placeholder='username'
validations={validations.username}
/>
</div>
<div>
<Input
type='email'
name='email'
placeholder='email'
validations={validations.email}
/>
</div>
<div>
<Textarea
name='message'
placeholder='message'
validations={validations.message}
/>
</div>
<div>
<input type='submit' value='submit' />
</div>
</Form>
Add .is-invalid
and .invalid-feedback
classes into your CSS.
.is-invalid {
border: 1px solid #dc3545;
}
.invalid-feedback {
display: none;
color: #dc3545;
}
.is-invalid~.invalid-feedback {
display: block;
}
Make sure you add the errors to the validations
object in backend.
app.post('/signup', (req, res) => {
const result = {
validations: {}
}
if (req.body.username === 'john') {
result.validations.username = 'john is already registered'
}
res.send(result)
})
Props & Callbacks
<Form>
Props
<Form
postUrl='http://site.com.post'
headers={{
'Content-Type': 'application/json'
}}
classNames={{
invalidInput: 'is-invalid',
invalidFeedback: 'invalid-feedback'
}}
>
Callbacks
<Form
onSubmit={() => {
console.log('onSubmit')
}}
validFormBeforePost={(res) => {
console.log(res.formItems)
}}
invalidFormBeforePost={(res) => {
console.log(res.formItems)
}}
validFormAfterPost={(res) => {
console.log(res.formItems)
console.log(res.ajaxResult)
res.cleanFormItems()
}}
invalidFormAfterPost={(res) => {
console.log(res.formItems)
console.log(res.ajaxResult)
}}
>
Contribution
Feel free to contribute. Open a new issue, or make a pull request.
License
0.0.35
5 years ago
0.0.34
5 years ago
0.0.33
6 years ago
0.0.32
6 years ago
0.0.31
6 years ago
0.0.30
6 years ago
0.0.29
6 years ago
0.0.28
6 years ago
0.0.27
6 years ago
0.0.26
6 years ago
0.0.25
6 years ago
0.0.24
6 years ago
0.0.23
6 years ago
0.0.22
6 years ago
0.0.21
6 years ago
0.0.20
6 years ago
0.0.19
6 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
6 years ago
0.0.10
6 years ago
0.0.8
6 years ago
0.0.7
6 years ago
0.0.6
6 years ago
0.0.5
6 years ago
0.0.4
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago