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-nativereact-form-with-constraints-bootstrap4react-form-with-constraints-material-ui<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 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.
validateForm(): Promise<Field[]> =>
Should be called before to submit the form. 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() without arguments.
isValid(): boolean => should be called after validateForm() or validateFields(), tells if the fields are valid
hasFeedbacks(): boolean => tells if the fields have any kind of feedback
reset(): Promise => resets internal FieldsStore and re-render all FieldFeedbacks
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.
You can use HTML5 attributes like type="email", required, pattern..., in this case a recent browser is needed,...
<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>
...or ignore them and 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).
react-form-with-constraints needs a polyfill such as core-js or babel-polyfill to support IE 11 and lower. See also React JavaScript Environment Requirements.
readonly or disabled input won't trigger any HTML5 form constraint like required.<input type="number"> it's better to use onInput instead of onChange, see https://github.com/facebook/react/issues/11142v0.9.3 (2018/09/12)
PropTypes.instanceOf() instead of PropTypes.objecttypeFAQs
Simple form validation for React
The npm package react-form-with-constraints receives a total of 547 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.