Inspect

Form validation in Javascript Vanilla, without dependencies and multiple languages. ~8kb

DEMO PAGE - http://ktquez.github.io/Inspect/

How to use

npm

npm install inspect-form --save

bower

bower install inspect-form --save

Include the script of the Inspect on your page

<script src="./path/to/inspect.min.js"></script>
...
</body>

Create your form

<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>

Attributes

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

Rules

required -- Required field, not empty
email -- Check a valid email address
max -- Limit the maximum value, for examplo: required|max:10.
min -- Limit the minimum value, for examplo: min:2.
card -- Checks if the credit card is entered correctly, 16 digits
number -- Checks if the value is a number
url -- Checks if the URL is entered correctly

Specific Brazil

cpfCnpf -- Checks if the value is a valid CPF or CNPJ
cpf -- Checks if the value is a valid CPF, 11 digits
cnpj -- Checks if the value is a valid CNPJ, 14 digits
cep -- Checks if the CEP is entered correctly, format pt-BR (XXXXX-XXX)

Defining the form on Inspect

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
});

Settings

Currently you can customize some inspect actions, customize how the form will be validated or even choose the type of alert.

form: -- Name the form
touched: -- If you want the Inspect check, when the user take the focus off the field, default : false
tooltip: -- If you want to use the alert more friendly, default : false
Info: By default the alerts are simple, you can customize through its style css, simple alert structure created:

<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

Performing validation with the created instances

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();

Reset form

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)
});

Short Syntax

new Inspect('formTest').toSubmit();

new Inspect({
  'form' : 'formTest',
  'tooltip' : true
}).make(function(data){
  // your code here (for example: AJAX requests)
});

For more than one form per page

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();

Languages

At the time the error messages are only available in:

pt-br -- Portuguese BR
pt -- Portuguese
en -- English
es -- Spanish

Alert: - Keep lang directory in the same location as the file inspect.min.js, to load the translation via ajax is successful.

How to use custom messages by language

To make it work the messages in the correct language, simply declare the attribute lang in HTML tag

<html lang="en">

Current version stable

V1.0.5

ChangeLog