Vulture.js
Vulture.js is a lightweight and powerful form validation library for JavaScript. It ensures data integrity, scans for invalid inputs, and dynamically renders errors within the form. With minimal syntax and a robust validation system, Vulture.js helps developers focus on other critical aspects while it handles validation effortlessly.
🚀 Features
- Simple Form Connection – Easily connect single or multiple forms.
- Error Rendering – Dynamically displays error messages below each field.
- Custom Error – Handles empty fields, required inputs, and strict validation.
- Strict Mode – Enables or disables advanced validation.
- Best Email validation – Check email address strictly, does not allow temp or custom email.
- Data formatter – Convert array of fields into JSON format.
- Field Combination – Combine two fields into one.
- Regex-based Identification – Smart field detection for various input types.
- Minimal Setup – Quick integration with any JavaScript project.
📦 How to Use
By CDN:
<script src="https://cdn.jsdelivr.net/npm/vulture-js@1.2.2/dist/vulture.min.js"></script>
NOTE: vulture-js
is currently available only for the browser, you can only connect to it with the help of CDN script. Sometimes @latest
not work as expected, so we recommend using the latest version.
Latest Version: v1.2.2
🔧 Usage
Single Form Connection
vulture.connect("myForm");
const form = document.querySelector("#myForm");
form.addEventListener("submit", (e) => {
e.preventDefault();
const { fields, errors } = vulture.talon({ strict: true, render_error: true });
if (errors) return console.error(errors);
console.log(fields);
});
Multiple Form Connection
vulture.multiConnect(["myForm1", "myForm2", "myForm3"]);
const forms = document.querySelectorAll("form");
forms.forEach((f, i) => {
f.addEventListener("submit", (e) => {
e.preventDefault();
const { formId, fields, errors } = vulture.talonAll(i, { strict: true, render_error: true });
console.log(formId, fields, errors);
});
});
🎯 Options
Option | Type | Default | Description |
---|---|---|---|
strict |
Boolean | false |
Enables strict validation rules. |
augment |
Array | null |
Adds more fields to the priority list. |
render_error |
Boolean | true |
Displays error messages below invalid fields. |
minmax |
Array | [2,50] |
Sets minimum & maximum length limits for fields containing name . |
phoneRules |
Array | [] |
Sets rules to validate phone numbers. |
combine |
Object | null |
Combines multiple fields into a single field. |
Use of augment
By using augment
you can add more fields to the priority list.
vulture.connect("myForm");
const form = document.querySelector("#myForm");
form.addEventListener("submit", (e) => {
e.preventDefault();
const { fields, errors } = vulture.talon({ strict: true, augment: ['tags', 'links'], render_error: true });
if (errors) return console.error(errors);
console.log(fields);
});
Use of minmax
By using minmax
, you can set the minimum and maximum length limits for fields containing name
(e.g., fullname
, username
, first_name
).
NOTE: minmax
does not work in strict: false
.
const { fields, errors } = vulture.talon({ strict: true, render_error: true, minmax: [3, 25] });
Use of phoneRules
By using phoneRules
, you can set the format of phone numbers.
const { fields, errors } = vulture.talon({ strict: true, render_error: true, phoneRules: ["+", "spaces"] });
These are the options that are used to set the format of phone numbers:
-
[]
- Phone number format is XXXXXXXXXX -
["+"]
- Phone number format is +XX XXXXXXXXXX -
["spaces"]
- Phone number format is XXX XXX XXXX -
["hyphens"]
- Phone number format is XXX-XXX-XXXX -
["dots"]
- Phone number format is XXX.XXX.XXXX -
["+", "spaces"]
- Phone number format is +XX XXX XXXX XXX, XXX XXXX XXX, +XXXXXXXXXXXX, XXXXXXXXXX
You can use more as per your requirements.
Note: The default phone number format is XXXXXXXXXX, and you don't need to provide a blank array phoneRules: []
.
Use of combine
By using combine
, you can merge two fields into a single field. It combines field values using specified operators.
const { fields, errors } = vulture.talon({
strict: true,
render_error: true,
combine: {
fieldsGroup: [
{ name: 'first_name', type: 'text', value: 'Anmol' },
{ name: 'last_name', type: 'text', value: 'Shrivastav' },
{ name: 'cu_code', type: 'text', value: '+91' },
{ name: 'phone_number', type: 'text', value: '917049XXXX' },
{ name: 'email', type: 'email', value: 'example123@example.com' }
],
fieldsToCombine: [
['cu_code', 'phone_number'],
['first_name', 'last_name']
],
attributes: [
{ name: 'phone_number', type: 'text' },
{ name: 'full_name', type: 'text' }
],
method: 'space'
}
});
// Output
[
{ name: 'email', type: 'email', value: 'example123@example.com' },
{ name: 'phone_number', type: 'text', value: '+91 917049XXXX' },
{ name: 'full_name', type: 'text', value: 'Anmol Shrivastav' }
]
Characteristics of Combine
Combine first_name
and last_name
into full_name
with space as a separator. This can be useful when you want to combine two fields into a single field for form submission or display purposes.
The combine
property should be an object with fieldsToCombine
, attributes
, and method
properties.
-
fieldsToCombine
is an array of field names to combine. -
attributes
is an array of objects, each representing an attribute to set for the combined field.-
name
specifies the name of the attribute to set. -
type
specifies the type of attribute to set (e.g., 'text', 'hidden', 'checkbox', etc.).
-
-
method
specifies the method to combine the fields (Methods are: 'space', 'hyphen', 'dot', 'underscore') (default is space).
Custom Error Messages
By using vulture.defError()
, you can define custom error messages for specific fields. This allows you to provide more meaningful feedback to users.
vulture.defError([
{ field: "first_name", required: "Please enter your name", min: "Enter at least 3 characters", max: "You cannot enter more than 25 characters" },
{ field: "email", not_valid: "Please enter a valid email address" },
{ field: "profession", required: "Please select your profession" },
{ field: "terms", required: "You must agree to the terms and conditions" }
]);
This method allows you to specify custom error messages for different validation rules such as required
, min
, max
, and not_valid
.
-
field
: The name of the field. -
required
: Message when the field is required but not filled. -
min
: Message when the field value is below the minimum length (only work in fields containingname
). -
max
: Message when the field value exceeds the maximum length (only work in fields containingname
). -
not_valid
: Message when the field value does not match the expected format.
Example usage:
vulture.connect("myForm");
// Define error
vulture.defError([
{ field: "first_name", required: "Please enter your name" },
{ field: "email", not_valid: "Please enter a valid email address" },
{ field: "terms", required: "You must agree to the terms and conditions" }
]);
const form = document.querySelector("#myForm");
form.addEventListener("submit", (e) => {
e.preventDefault();
const { fields, errors } = vulture.talon({ strict: true, render_error: true });
if (errors) return console.error(errors);
console.log(fields);
});
How to directly store to the database ?
By using vulture.formatter()
you can send directly store to the database without any additional code.
It convert Array of fields to form data Objects.
vulture.connect("myForm");
const form = document.querySelector("#myForm");
form.addEventListener("submit", (e) => {
e.preventDefault();
const { fields, errors } = vulture.talon({ strict: true, render_error: true });
if (errors) return console.error(errors);
// For formating the data
const data = vulture.formatter(fields);
console.log(data);
// Output by using formatter:-
// {
// firstname: "Anmol",
// lastname: "Shrivastav",
// email: "example@gmail.com"
// }
// Send data to your backend
fetch('https://api.you-domain.com/user-form', {
method: 'POST',
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json"
}
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
});
How to Display error after validation ?
By using vulture.error()
, you can display error messages in your form.
Note: This method only displays error messages; it does not stop the process by itself.
Useful for throwing errors after checking email, username, and ID.
const users = [{
first_name: 'Anmol',
last_name: 'Shrivastav',
email: 'codeshorter@gmail.com'
}]
const ext_user = users.find(user => user.email === data.email);
// vulture.error('field name', "Error you want to display")
if (ext_user) {
vulture.error('email', "Email is already exist.")
return; // For stoping further process
};
📌 Example HTML Form
NOTE: For Displaying error correctly write error
in div class name and input field name (e.g. username
) in div ID
<form id="myForm">
<input type="text" id="username-inp" name="username" placeholder="Username">
<div id="username" class="error"></div>
<button type="submit">Submit</button>
</form>
Full Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vulture.js Example</title>
</head>
<body>
<form id="user-form">
<input type="text" name="username">
<button type="submit">Submit</button>
</form>
<!-- Include Vulture.js just before closing body -->
<script src="https://cdn.jsdelivr.net/npm/vulture-js@latest/dist/vulture.min.js"></script>
<script>
vulture.connect("user-form");
document.querySelector("#user-form").addEventListener("submit", (e) => {
e.preventDefault();
const { fields, errors } = vulture.talon({ strict: true, render_error: true });
if (errors) return console.error(errors);
console.log(vulture.formatter(fields));
});
</script>
</body>
</html>
🛠️ Contributing
Contributions are welcome! Feel free to submit issues and pull requests.
Steps to Contribute:
- Fork the repository.
- Clone the repo:
git clone https://github.com/code-shorter/vulture-js.git
- Create a new branch:
git checkout -b feature-branch
- Commit your changes:
git commit -m "Add new feature"
- Push to your branch:
git push origin feature-branch
- Submit a pull request.
📜 License
Vulture.js is open-source and available under the MIT License.
🌐 Links & Resources
- Documentation: https://vulturejs.github.io
- GitHub: https://github.com/code-shorter/vulture-js
- NPM: https://www.npmjs.com/package/vulture-js
🦅 About Vulture.js
Vulture.js is inspired by the natural role of vultures in the ecosystem. Just as vultures clean up the environment by removing harmful waste, Vulture.js ensures clean and valid form submissions by filtering out invalid data.
Happy Coding! 🎉
Top comments (0)