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

Or

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

V1.0.5

• Change format data attribute custom message

V1.0.4

• Correction alert tooltip

Contributing

• Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found.
• Fork repository, make changes, add your name and link in the authors session readme.md
• Send a pull request

If you want a faster communication, find me on @ktquez

thank you