Form validation in pure JavaScript.
npm install vanillajs-form-validator --save1 - Create HTML markup with data-required on <input /> tag:
<form id="form" novalidate>
<div class="form-group">
<input
type="text"
name="name"
placeholder="Name"
autocomplete="off"
data-required>
</div>
<button type="submit">Submit</button>
</form>2 - Create validator instance and call .init() method:
var form = document.getElementById('form')
var formValidate = new FormValidate({
formSelector: form
})
formValidate.init()| name | type | defalt value |
|---|---|---|
formSelector |
HTML DOM Element |
|
formGroupSelector |
String |
form-group |
validClass |
String |
valid |
invalidClass |
String |
invalid |
msgClass |
String |
input-msg |
| name | action |
|---|---|
FormValidate.trigger() |
Force trigger validation event |
FormValidate.checkValidFields() |
Check if form required fields was validated |
FormValidate.reset() |
Clear form values and valid and invalid classes |
FormValidate.getValues() |
Get form values and return an object |
Add data-required attribute on <input /> tag:
<div class="form-group">
<input
type="email"
name="name"
placeholder="Name"
autocomplete="off"
data-required
data-validate-rule="email">
</div>| name | validation type |
|---|---|
data-validate-rule="email" |
Check valid e-mail |
data-validate-rule="phone" |
Check valid Brazil phone number |
data-validate-rule="cpf" |
Check valid CPF |
data-validate-rule="rg" |
Check valid RG |
data-validate-rule="cep" |
Check valid CEP |
data-validate-rule="url" |
Check valid CEP |
Add data-validate-regex attribute on <input /> tag:
<div class="form-group">
<input
type="text"
name="name"
placeholder="Only numbers"
autocomplete="off"
data-required
data-validate-regex="\d+"
data-validate-msg="Only numbers is required field">
</div>Add data-validate-msg attribute on <input /> tag:
<div class="form-group">
<input
type="email"
name="name"
placeholder="Name"
autocomplete="off"
data-required
data-validate-msg="Name is required field">
</div>Click here to view demo.
<form id="form" novalidate>
<div class="form-group">
<input
type="text"
name="name"
placeholder="Name"
autocomplete="off"
data-required>
</div>
<button type="submit">Submit</button>
</form>
<script src="dist/js/vanillajs-form-validator.js"></script>
<script>
var form = document.getElementById('form')
var config = {
formSelector: form
}
var formValidate = new FormValidate(config)
formValidate.init()
</script>var form = document.getElementById('form')
var formValidate = new FormValidate({
formSelector: form,
inputGroupClass: 'uk-margin',
validClass: 'uk-form-success',
invalidClass: 'uk-form-danger',
msgClass: 'input-msg'
})
formValidate.init()Click here to view demo.
var form = document.getElementById('form')
var config = {
formSelector: form,
inputGroupClass: 'uk-margin',
validClass: 'uk-form-success',
invalidClass: 'uk-form-danger',
msgClass: 'input-msg'
}
var formValidate = new FormValidate(config)
formValidate.init()
form.addEventListener('submit', () => {
// check valid form
var isValid = formValidate.checkValidFields()
if (isValid) {
// get input values
console.table(formValidate.getValues())
// reset form
formValidate.reset()
}
})Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
We use SemVer for versioning. For the versions available, see the tags on this repository.
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details