vk-form-validator-js
v1.1.0
Published
A simple JavaScript form validation library
Maintainers
vikassinghrajputReadme
Form Validator JS
A simple and lightweight JavaScript form validation library that makes it easy to add client-side form validation with minimal effort. It supports various input types like text, email, password, number, and more.
Features
- Validates input fields (text, email, password, number, radio, select, textarea, etc.)
- Provides real-time validation feedback on input fields
- Supports optional fields
- Displays helpful validation messages for each input type
- Built with Bootstrap 5 for easy integration into web projects
Installation
You can install vk-form-validator-js via npm:
npm install vk-form-validator-js
HTML Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validator Test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<form class="needs-validation" novalidate>
<div>
<label>Email:</label>
<input type="email" required />
</div>
<div>
<label>Password:</label>
<input type="password" required />
</div>
<button type="submit">Submit</button>
</form>
<script type="module">
import FormValidator from 'form-validator-js';
document.addEventListener("DOMContentLoaded", function () {
new FormValidator();
});
</script>
</body>
</html>
JavaScript Usage:
If you're working in a JavaScript environment, import the FormValidator module and initialize it after the DOM content has loaded:
```import FormValidator from 'form-validator-js'; document.addEventListener("DOMContentLoaded", function () { new FormValidator(); }); ```
Validation Rules
- Text fields: Must be at least 2 characters long.
- Email fields: Must match the standard email format (e.g., [email protected]).
- Phone number fields: Must contain between 8 to 12 digits.
- Password fields: Must be at least 6 characters long.
- Number fields: Must be a valid number.
- Radio buttons: Must select one option.
- Select fields: Must select a value (for single and multiple selects).
- Text areas: Must have at least 5 characters.