HTML5 Validation Helpers for Reactstrap
Basically, replace FormGroup
from reactstrap with ValidatingFormGroup
. This will cause the Input
inside to have valid
prop bound to HTML5 ValidationState.
Optional props:
trigger
- can beblur
(default) orchange
onStateChange
- callback that gets called when internal validation state change occurs. This state is passed in callback argument and it has properties:value
- fields current valueref
- HTML5 field referencevalid
- can beundefined
(initial value),true
orfalse
validationMessage
.
valid
- the initial validity that the field will have when internal validation state isundefined
. Can be used to handle server-side validation feedback. Changing this prop resets internal validation state back to undefined.
import 'bootstrap/dist/css/bootstrap.css';
import * as React from 'react';
import { Form, FormFeedback, Input } from 'reactstrap';
import { ValidatingFormGroup } from 'reactstrap-validation';
export interface HelloProps {
initialValid?: boolean;
}
export class Hello extends React.Component<HelloProps> {
render() {
const { initialValid } = this.props;
return (
<Form>
<ValidatingFormGroup trigger="change" valid={initialValid} onStateChange={console.log}>
<Input required type="email" />
<FormFeedback>
<iframe src="https://giphy.com/embed/3oz8xLd9DJq2l2VFtu" width="480" height="287"></iframe>
</FormFeedback>
</ValidatingFormGroup>
</Form>
);
}
}