Form validation in Javascript Vanilla, without dependencies and multiple languages. <3kb gzipped
GPL-2.0 License
Form validation in Javascript Vanilla, without dependencies and multiple languages. ~8kb
DEMO PAGE - http://ktquez.github.io/Inspect/
npm install inspect-form --save
bower install inspect-form --save
Include the script of the Inspect on your page
<script src="./path/to/inspect.min.js"></script>
...
</body>
<form action="#" method="POST" name="formTest" novalidate>
<div class="form-group">
<label for="name">NAME:</label>
<input type="text" id="name" name="name" data-rules="required" data-msg-custom="Fullname">
</div>
<div class="form-group">
<label for="email">EMAIL:</label>
<input type="email" id="email" name="email" data-rules="required|email" data-msg-custom="Email">
</div>
<button type="submit">ENVIAR</button>
</form>
data-rules
: The rules that will apply to the field
Info: You can use more than one rule, for it must use the pipe, for examplo: required|number|cpf
data-msg-custom
Opcional : Text, if you want to customize the output of the error message
Info: If it was not informed msn Custom, the field name will be used
required|max:10
.min:2
.Instantiates the form only through the name the form
var myForm = new Inspect('formTest');
Instance the form through the settings
var myForm = new Inspect({
'form' : 'formTest',
'touched' : true,
'tooltip' : true
});
Currently you can customize some inspect actions, customize how the form will be validated or even choose the type of alert.
<div class="inspect-message" style="position:relative;width:100%;float:left;">
<span class="inspect-message-text" style="color: red;">O Campo Nome é obrigatório</span>
</div>
Just customize the classes available, inspect-message
and inspect-message-text
For validations and data prepared for AJAX requests, use the following syntax:
var myForm = new Inspect('formTest');
myForm.make(function(data){
// your code here (for example: AJAX requests)
});
For normal implementation of the form
var myForm = new Inspect('formTest');
myForm.toSubmit();
If you need to empty the form, simply use the function myForm.pristine();
For example:
var myForm = new Inspect('formTest');
myForm.make(function(data){
myForm.pristine(); // Reset
// your code here (for example: AJAX requests)
});
new Inspect('formTest').toSubmit();
Or
new Inspect({
'form' : 'formTest',
'tooltip' : true
}).make(function(data){
// your code here (for example: AJAX requests)
});
var myForm = new Inspect('formTest')
myForm.toSubmit();
var myForm2 = new Inspect({
'form' : 'formTest2',
'tooltip' : true
});
myForm2.make(function(){
// your code here (for example: AJAX requests)
});
var myForm3 = new Inspect({
'form' : 'formTest3',
'tooltip' : true
})
myForm3.toSubmit();
At the time the error messages are only available in:
Alert: - Keep lang directory in the same location as the file inspect.min.js, to load the translation via ajax is successful.
To make it work the messages in the correct language, simply declare the attribute lang in HTML tag
<html lang="en">
V1.0.5
V1.0.5
V1.0.4
If you want a faster communication, find me on @ktquez
thank you