
Security News
New CVE Forecasting Tool Predicts 47,000 Disclosures in 2025
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
react-form-with-constraints
Advanced tools
Simple form validation for React in ~300 lines of code
npm install react-form-with-constraints
<form>
<label>Email:</label>
<input type="email" required>
<button>Submit</button>
</form>
The required
HTML5 attribute specifies that the user must fill in a value. Other available attributes: min
, max
, minlength
, maxlength
, pattern
... see MDN documentation - Form data validation.
type="email"
checks that the entered text looks like an email address. Other available input types: checkbox
, date
, number
, password
, tel
, text
, url
... see MDN documentation - Form input types.
<FieldFeedback when="valueMissing">My custom error message</FieldFeedback>
<FieldFeedback when={value => ...}>
<FieldFeedback ... warning>
<FieldFeedback ... info>
<FieldFeedbacks ... show="all">
<input type="password" name="password"
value={this.state.password} onChange={this.handleChange}
pattern=".{5,}" required />
<FieldFeedbacks for="password" show="all">
<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>
<FieldFeedback when={value => !/\W/.test(value)} warning>Should contain special characters</FieldFeedback>
</FieldFeedbacks>
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.
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 default HTML5 feedback"
when constraint violation "patternMismatch" display "Should be at least 5 characters long"
FieldFeedbacks
for: string
=> refer to a name
attribute, e.g <input name="password">
show?: 'first' | 'all'
=> display the first error/warning encountered (default) or all of themchildren: FieldFeedback[]
FieldFeedback
when:
ValidityState
string | '*' | function
=> HTML5 constraint violation name or a callbackerror?: boolean
=> treat the feedback as an error (default)warning?: boolean
=> treat the feedback as a warninginfo?: boolean
=> treat the feedback as an infochildren?: string
=> the text to display or the default HTML5 text if undefined
FormWithConstraints
handleChange(e: React.FormEvent<Input>): void
=> needs to be called whenever an input
from the form
changeshandleSubmit(e: React.FormEvent<HTMLFormElement>): void
hasErrors(...fieldNames: string[]): boolean
hasWarnings(...fieldNames: string[]): boolean
isValid(): boolean
You can use HTML5 attributes like type="email"
, required
, pattern
..., in this case a recent browser is needed,...
<form onSubmit={this.handleSubmit} noValidate>
<label>Username</label>
<input type="email" name="username"
value={this.state.username} onChange={this.handleChange}
required />
<FieldFeedbacks for="username">
<FieldFeedback when="*" />
</FieldFeedbacks>
<button>Submit</button>
</form>
...or ignore them and rely on when
functions:
<form onSubmit={this.handleSubmit} noValidate>
<label>Username</label>
<input name="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>
<button>Submit</button>
</form>
In the last case you will have to manage translations yourself.
I do not like to inherit from FormWithConstraints
, if you find a better solution tell me.
FAQs
Simple form validation for React
The npm package react-form-with-constraints receives a total of 403 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
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.