react-form-with-constraints
Advanced tools
Simple form validation for React
npm install react-form-with-constraintsCheck the changelog for breaking changes and fixes between releases.
⚠️ Client side validation is cosmetic, you should not rely on it to enforce security
<form>
<label for="email">Email:</label>
<input type="email" id="email" required>
<button>Submit</button>
</form>
The required HTML5 attribute specifies that the user must fill in a value, type="email" checks that the entered text looks like an email address.
Resources:
<FieldFeedback when="valueMissing">My custom error message</FieldFeedback><FieldFeedback when={value => ...}><FieldFeedback ... warning>, <FieldFeedback ... info>react-form-with-constraints-bootstrap4react-form-with-constraints-material-uireact-form-with-constraints-native<input type="password" name="password"
value={this.state.password} onChange={this.handleChange}
required pattern=".{5,}" />
<FieldFeedbacks for="password">
<FieldFeedback when="valueMissing" />
<FieldFeedback when="patternMismatch">
Should be at least 5 characters long
</FieldFeedback>
<FieldFeedback when={value => !/\d/.test(value)} warning>
Should contain numbers
</FieldFeedback>
<FieldFeedback when={value => !/[a-z]/.test(value)} warning>
Should contain small letters
</FieldFeedback>
<FieldFeedback when={value => !/[A-Z]/.test(value)} warning>
Should contain capital letters
</FieldFeedback>
</FieldFeedbacks>
CodePen basic example: https://codepen.io/tkrotoff/pen/BRGdqL
CodeSandbox Bootstrap 4 example: https://codesandbox.io/s/nkqrr17qqj
CodeSandbox Material-UI example: https://codesandbox.io/s/zx62rw4k64
CodeSandbox WizardForm example: https://codesandbox.io/s/my0ojyzq6p
CodeSandbox SignUp example: https://codesandbox.io/s/62qwozvm0k
CodeSandbox ClubMembers example: https://codesandbox.io/s/q8364yn60j
| iOS | Android |
|---|---|
 |  |
Other examples inside the examples directory.
The API works the same way as React Router v4:
<Router>
<Route exact path="/" component={Home} />
<Route path="/news" component={NewsFeed} />
</Router>
It is also inspired by AngularJS ngMessages.
If you had to implement validation yourself, you would end up with a global object that tracks errors for each field.
react-form-with-constraints works similarly.
It uses React context to share the FieldsStore object across FieldFeedbacks and FieldFeedback.
The API reads like this: "for field when constraint violation display feedback", example:
<FieldFeedbacks for="password">
<FieldFeedback when="valueMissing" />
<FieldFeedback when="patternMismatch">Should be at least 5 characters long</FieldFeedback>
</FieldFeedbacks>
for field "password"
when constraint violation "valueMissing" display <the HTML5 error message (*)>
when constraint violation "patternMismatch" display "Should be at least 5 characters long"
Async support works as follow:
<FieldFeedbacks for="username">
<Async
promise={checkUsernameAvailability} /* Function that returns a promise */
then={available => available ?
<FieldFeedback key="1" info style={{color: 'green'}}>Username available</FieldFeedback> :
<FieldFeedback key="2">Username already taken, choose another</FieldFeedback>
// Why key=*? Needed otherwise React gets buggy when the user rapidly changes the field
}
/>
</FieldFeedbacks>
Trigger validation:
class MyForm extends React.Component {
async handleChange(e) {
const target = e.target;
// Validates only the given fields and returns Promise<Field[]>
const fields = await this.form.validateFields(target);
const fieldIsValid = fields.every(field => field.isValid());
if (fieldIsValid) console.log(`Field '${target.name}' is valid`);
else console.log(`Field '${target.name}' is invalid`);
if (this.form.isValid()) console.log('The form is valid');
else console.log('The form is invalid');
}
async handleSubmit(e) {
e.preventDefault();
// Validates the non-dirty fields and returns Promise<Field[]>
const fields = await this.form.validateForm();
// or simply use this.form.isValid()
const formIsValid = fields.every(field => field.isValid());
if (formIsValid) console.log('The form is valid');
else console.log('The form is invalid');
}
render() {
return (
<FormWithConstraints
ref={formWithConstraints => this.form = formWithConstraints}
onSubmit={this.handleSubmit} noValidate
>
<input
name="username"
onChange={this.handleChange}
required minLength={3}
/>
<FieldFeedbacks for="username">
<FieldFeedback when="tooShort">Too short</FieldFeedback>
<Async
promise={checkUsernameAvailability}
then={available => available ?
<FieldFeedback key="1" info style={{color: 'green'}}>Username available</FieldFeedback> :
<FieldFeedback key="2">Username already taken, choose another</FieldFeedback>
}
/>
<FieldFeedback when="*" />
</FieldFeedbacks>
</FormWithConstraints>
);
}
}
for: string => reference to a name attribute (e.g <input name="username">), should be unique to the current formstop?: 'first' | 'first-error' | 'first-warning' | 'first-info' | 'no' =>
when to stop rendering FieldFeedbacks, by default stops at the first error encountered (FieldFeedbacks order matters)Note: you can place FieldFeedbacks anywhere, have as many as you want for the same field, nest them, mix them with FieldFeedback... Example:
<input name="username" ... />
<FieldFeedbacks for="username" stop="first-warning">
<FieldFeedbacks>
<FieldFeedback ... />
<Async ... />
<FieldFeedbacks stop="first-info">
...
</FieldFeedbacks>
</FieldFeedbacks>
<FieldFeedback ... />
<Async ... />
</FieldFeedbacks>
<FieldFeedbacks for="username" stop="no">
...
</FieldFeedbacks>
when?:
ValidityState as a string => HTML5 constraint violation name'*' => matches any HTML5 constraint violation'valid' => displays the feedback only if the field is valid(value: string) => boolean => custom constrainterror?: boolean => treats the feedback as an error (default)warning?: boolean => treats the feedback as a warninginfo?: boolean => treats the feedback as an infochildren => what to display when the constraint matches; if missing, displays the HTML5 error message if anyAsync<T> => Async version of FieldFeedback (similar API as react-promise)
promise: (value: string) => Promise<T> => a promise you want to wait forpending?: React.ReactNode => runs when promise is pendingthen?: (value: T) => React.ReactNode => runs when promise is resolvedcatch?: (reason: any) => React.ReactNode => runs when promise is rejectedvalidateFields(...inputsOrNames: Array<Input | string>): Promise<Field[]> =>
Should be called when a field changes, will re-render the proper FieldFeedbacks (and update the internal FieldsStore).
Without arguments, all fields ($('[name]')) are validated.
validateFieldsWithoutFeedback(...inputsOrNames: Array<Input | string>): Promise<Field[]> =>
Validates only all non-dirty fields (won't re-validate fields that have been already validated with validateFields()),
If you want to force re-validate all fields, use validateFields().
validateForm(): Promise<Field[]> =>
Same as validateFieldsWithoutFeedback() without arguments, typically called before to submit the form.
Might be removed in the future?
isValid(): boolean => should be called after validateFields(), validateFieldsWithoutFeedback() or validateForm(), tells if the fields are valid
hasFeedbacks(): boolean => tells if the fields have any kind of feedback
resetFields(...inputsOrNames: Array<Input | string>): Promise<Field[]> =>
Resets the given fields and re-render the proper FieldFeedbacks.
Without arguments, all fields ($('[name]')) are reset.
Field =>
{
name: string;
validations: { // FieldFeedbackValidation[]
key: number;
type: 'error' | 'warning' | 'info' | 'whenValid';
show: boolean | undefined;
}[];
isValid: () => boolean
}
If you want to style <input>, use <Input> instead: it will add classes has-errors, has-warnings, has-infos and/or is-valid on <input> when the field is validated.
Example: <Input name="username" /> can generate <input name="username" class="has-errors has-warnings">
FYI react-form-with-constraints-bootstrap4 and react-form-with-constraints-material-ui already style the fields to match their respective frameworks.
react-form-with-constraints needs ValidityState which is supported by all modern browsers and IE >= 10.
It also needs a polyfill such as core-js or @babel/polyfill to support IE <= 11, see React JavaScript Environment Requirements.
You can use HTML5 attributes like type="email", required, minlength...
<label htmlFor="username">Username</label>
<input type="email" name="username" id="username"
value={this.state.username} onChange={this.handleChange}
required />
<FieldFeedbacks for="username">
<FieldFeedback when="*" />
</FieldFeedbacks>
...and/or rely on when functions:
<label htmlFor="username">Username</label>
<input name="username" id="username"
value={this.state.username} onChange={this.handleChange} />
<FieldFeedbacks for="username">
<FieldFeedback when={value => value.length === 0}>Please fill out this field.</FieldFeedback>
<FieldFeedback when={value => !/\S+@\S+/.test(value)}>Invalid email address.</FieldFeedback>
</FieldFeedbacks>
In the last case you will have to manage translations yourself (see SignUp example).
type="hidden", readonly or disabled input won't trigger any HTML5 form constraint validation like required, see https://codepen.io/tkrotoff/pen/gdjVNv<input type="number"> it's better to use onInput instead of onChange, see https://github.com/facebook/react/issues/11142FAQs
Simple form validation for React
The npm package react-form-with-constraints receives a total of 397 weekly downloads. As such, react-form-with-constraints popularity was classified as not popular.
We found that react-form-with-constraints demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.