Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
React Hook Form | 36,922 | 127 | 2,736 | 18 hours ago | 1,003 | July 17, 2023 | 27 | mit | TypeScript | |
📋 React Hooks for form state management and validation (Web + React Native) | ||||||||||
Redux Form | 12,600 | 11,781 | 1,349 | 12 days ago | 237 | March 28, 2023 | 494 | mit | JavaScript | |
A Higher Order Component using react-redux to keep form state in a Redux store | ||||||||||
Eureka | 11,681 | 490 | a month ago | 27 | September 15, 2020 | 173 | mit | Swift | ||
Elegant iOS form builder in Swift | ||||||||||
Vee Validate | 10,178 | 2,190 | 914 | 2 days ago | 315 | August 01, 2023 | 42 | mit | TypeScript | |
✅ Painless Vue forms | ||||||||||
Formily | 10,077 | 278 | 12 days ago | 237 | July 10, 2023 | 38 | mit | TypeScript | ||
📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3 | ||||||||||
Parsley.js | 9,041 | 329 | 46 | 6 months ago | 47 | December 10, 2019 | 70 | mit | JavaScript | |
Validate your forms, frontend, without writing a single line of javascript | ||||||||||
React Final Form | 7,282 | 500 | 628 | 4 months ago | 76 | April 01, 2022 | 390 | mit | JavaScript | |
🏁 High performance subscription-based form state management for React | ||||||||||
Formkit | 3,572 | 29 | 3 days ago | 263 | August 16, 2023 | 56 | mit | TypeScript | ||
Vue Forms ⚡️ Supercharged | ||||||||||
Tcomb Form Native | 3,162 | 499 | 19 | a year ago | 53 | October 11, 2018 | 128 | mit | JavaScript | |
Forms library for react-native | ||||||||||
Formsy React | 2,599 | 4 | 3 years ago | 1 | November 20, 2018 | 149 | mit | JavaScript | ||
A form input builder and validator for React JS |
serialize
and validation
methodsAdditionally, this module is delivered as:
dist/formee.mjs
dist/formee.js
dist/formee.min.js
$ npm install --save formee
<form id="foo">
<h2>Register</h2>
<input type="email" name="email" />
<input type="password" name="password" />
<input type="password" name="confirm" />
<button>Register</button>
</form>
const { validate } = require('formee');
const myForm = document.querySelector('#foo');
const myRules = {
// RegExp rule
email: /.+\@.+\..+/,
// Function, with custom error messages
password(val) {
if (!val) return 'Required';
return val.length >= 8 || 'Must be at least 8 characters';
},
// Function, comparing to other value
confirm(val, data) {
if (!val) return 'Required';
return val === data.password || 'Must match your password';
}
};
myForm.onsubmit = function (ev) {
ev.preventDefault();
let errors = validate(myForm, myRules);
if (myForm.isValid) return alert('Success!');
for (let k in errors) {
// TODO: Render errors manually
// with {insert favorite UI lib here}
console.log(`My rule & element's name: ${k}`);
console.log('> Error message:', errors[k] || 'Required');
console.log('> My form element(s):', myForm.elements[k]);
}
};
Return: Object
Serializes a <form>
into a data object.
Important: Any inputs that are unnamed, disabled, or are of
type=file|reset|submit|button
will be ignored.
Type: HTMLFormElement
The <form>
element to evaluate.
Return: Object
Validates a <form>
according to its rules
.
To check an individual input, you may pass its name as the toCheck
value.
Important: The
rules
key names must matchform.elements
' names~!
Returns an Object of errors, whose keys are the failing rules
keys (and the name=""
s of failing elements) and whose values are your error messages (if provided) else false
.
Additionally, the <form>
and each of its elements will receive a new isValid
property with a Boolean
value.
For example:
let myForm = document.querySelector('#myform');
let errors = formee.validate(myForm, { ... });
if (!myForm.isValid) {
let i=0, item;
for (; i < myForm.elements; i++) {
item = myForm.elements[i];
console.log(`${item.name} Am I valid?`, item.isValid);
item.isValid || console.log('>> my error message:', errors[item.name]);
}
}
Type: HTMLFormElement
The <form>
element to validate.
Type: Object
An object of rules for your form's inputs.
Important: The key names must match a
<form>
element'sname=""
attribute!
The form values will be serialized before reaching your rule(s). (see serialize
)
For example, a select[multiple]
may present its value as undefined
, a String, or an Array of Strings.
Each rule:
RegExp
or a Function
false
or an error message (String
) if invalidtrue
if validYour Function
-type rules will receive the corresponding input's value and the entire data object.
validate(form, {
password(val, data) {
if (!val) return 'Required';
if (val.length < 8) return 'Must be at least 8 characters';
if (val !== data.confirmPassword) return 'Please confirm your password!';
return true; // all good homie
}
});
Type: String
Default: undefined
If set, only the corresponding form element (with name={toCheck}
) will be validated.
When unset (default), all form elements will be validated.
Important: The value must match a key within
rules
and aname=""
attribute for one of<form>
's elements.
Return: HTMLFormElement
Attaches serialize
and validate
methods to the <form>
element.
Also registers a custom onsubmit
handler that will:
event.preventDefault
the "submit"
eventvalidate
, then
a) If all validation passed, call your options.onSubmit
function
b) Otherwise, call your options.onError
functionlet myForm = document.querySelector('#myform');
formee.bind(myForm, {
rules: {
// ...
},
onSubmit(ev) {
// validation passed!
console.log(ev.errors); //=> {}
console.log(ev.target === myForm); //=> true
console.log(myForm.isValid, myForm.errors); //=> true {}
},
onError(ev) {
// validation failed!
console.log(ev.errors); //=> { ... }
console.log(ev.target === myForm); //=> true
console.log(myForm.isValid, myForm.errors); //=> false { ... }
}
});
// Now available:
// ---
form.serialize();
form.validate(/* specific item? */);
Type: HTMLFormElement
The <form>
element to evaluate.
Type: Object
Passed directly to validate
see rules
.
Type: Function
Required: true
The callback to run when validation succeeds fails.
It receives the original event
however, a event.errors
property is added, containing the output from validate
.
Type: Function
Required: true
The callback to run when validation fails.
It receives the original event
however, a event.errors
property is added, containing the output from validate
.
MIT Luke Edwards