Powerful pure Javascript form validator with a feature of adding your own validations
- Custom validations: you can add your own validations, just add them in the option object.
- Highly customizable: has a powerful API and can be used however you want.
- Built-in sender: has a built-in sender for a sending your form to the server through XMLHttpRequest or Fetch API.
- EcmasScript 6: uses last features of Javascript.
- MIT Licensed: free for personal and commercial use.
formhandler.js has a few methods to connect to your project: CDN, npm or downloading latest release.
For using formhandler.js with CDN you need to include CSS in your <head> tag.
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/formhandler.js@x.x.x/dist/css/formhandler.min.css">Also needed inclusion Javascript before closing <body> tag.
<script src="//cdn.jsdelivr.net/npm/formhandler.js@x.x.x/dist/js/formhandler.min.js"></script>Firstly install formhandler.js package from npm.
npm i -D formhandler.js
In your Javascript file import formhandler.js.
import FormHandler from 'formhandler.js';Then move formhandler.min.js from directory /node_modules/formhandler.js/dist/js/ in your project folder.
Include this one before closing <body> tag
<script src="/path/to/dir/formhandler.min.js"></script>Import slippery.min.css in your Sass/SCSS file using @import.
@import "/node_modules/formhandler.js/dist/css/formhandler.min.css"If you're using another preprocessor, use equivalent of it.
Then just include formhandler.min.css inside of <head> tag.
<link rel="stylesheet" href="/path/to/dir/formhandler.min.css">If you don't want to use CDN and you don't use npm, then you need to download latest release
from Releases.
After that unpack archive and move CSS/JS files from formhandler.js-x.x.x/dist/ to where you want to.
Finally include slippery.min.css inside <head> tag.
<link rel="stylesheet" href="/path/to/dir/formhandler.min.css">Also include formhandler.min.js before closing tag.
<script src="/path/to/dir/formhandler.min.js"></script>Every inputs must have an attribute name.
<form class="formhandler"
action="#"
method="POST">
<div class="formhandler__notices"></div> <!-- For notice of the form -->
<input class="formhandler__field" type="text" name="firstname" placeholder="First name">
<input class="formhandler__field" type="text" name="lastname" placeholder="Last name">
<select class="formhandler__field" name="select">
<option value="">Choose...</option>
<option value="option 1">Option 1</option>
<option value="option 2">Option 2</option>
<option value="option 3">Option 3</option>
<option value="option 4">Option 4</option>
<option value="option 5">Option 5</option>
</select>
<div>
<input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 1"> Checkbox 1
<input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 2"> Checkbox 2
<input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 3"> Checkbox 3
<input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 4"> Checkbox 4
<input class="formhandler__field" type="checkbox" name="checkbox" value="Checkbox 5"> Checkbox 5
</div>
<div>
<input class="formhandler__field" type="radio" name="radio" value="Radio 1"> Radio 1
<input class="formhandler__field" type="radio" name="radio" value="Radio 2"> Radio 2
</div>
<textarea class="formhandler__field" name="message"
cols="30" rows="10" placeholder="Message"></textarea>
<button class="formhandler__submit" type="submit" name="submit">Submit</button>
</form>After including formhandler.js with one of methods and adding HTML markup.
Initialize formhandler.js instance in your Javascript file or inside <script> tag.
Every property of object fields must fit to value of the name attribute input tag. For example, if you have <input type="text" name="firstname> then for recognizing field object with options must have name is 'firstname'.
const formhandler = new FormHandler({
fields: {
firstname: {
validation: 'isName',
},
lastname: {
validation: 'isName',
},
select: {
validation: 'isSelected',
},
checkbox: {
validation: 'isCheckboxChecked',
},
radio: {
validation: 'isRadioChecked',
},
message: {
validation: 'isNonEmpty',
},
},
});After that formhandler.js instance will be initialized with default settings.
| Name | Support of min/max | Support of input types | Description |
|---|---|---|---|
| isNonEmpty | Yes | Any (including textarea) | If input is not empty then it will be valid in range of min and max if it specified. |
| isName | Yes | Any text-like input types (including textarea) | If input contain only letters then it will be valid in range of min and max if it specified. |
| isEmail | Yes | Any text-like input types (including textarea) | If input contain valid email address (ex. example@domain.com) then it will be valid in range of min and max if it specified. |
| isPhone | Yes | Any text-like input types (including textarea) | If input contain valid phone number then it will be valid in range of min and max if it specified. |
| isCheckboxChecked | Yes | checkbox | If any checkbox is checked, then it will be valid. If 'min' was specified, then you must check at least that number of checkboxes. If 'max' was specified, then you must check less or equal number of checkboxes. |
| isRadioChecked | No | radio | Any radio button in the group (radios with the same values of name attribute) must be checked. |
| isSelected | No | select | Selected 'options' of the 'select' tag must have value. |
Adding your own validations | Demo
Custom validation must be a function that passes argument node (dom element). Function should return object with 'valid' property that contains result of validation (boolean) and 'message' property that contains string with a message of the notice.
const formhandler = new FormHandler({
fields: {
firstname: {
validation: 'isName',
},
lastname: {
validation: 'isName',
},
select: {
validation: 'isSelected',
},
checkbox: {
validation: 'isCheckboxChecked',
},
radio: {
validation: 'isRadioChecked',
},
message: {
validation: 'isCustom', // We're apply our custom validation to the field message (textarea tag)
},
},
customValidations: {
isCustom(node) {
const pattern = /[a-z]/;
let valid = pattern.test(node.value),
message = 'iscustom invalid';
return {
valid,
message,
};
},
},
});