tFormer.js - empower your HTML forms

Preface:

Did you have to impose forms? Did you have to write a script to validate these forms on the client? Have you ever used plugins / add-ons for form validation?
I had to, but I was not 100% satisfied with the approach to solving the problem head-on (my own validation script for each project under its form), nor how existing third-party plug-ins work.

Problem:

The main problems of our own scripts and plug-ins have always been flexibility, convenience and simplicity.
A large number of data-attributes needed to configure scripts (as in Parsley.js) make the code less readable, and you never remember how all of them are written. Not so easy…
Not all plugins are well suited for desired HTML-forms, and constantly writing your scripts for different forms is not always convenient and reasonable.
')

Task:

Create something flexible, customizable, fully controllable, with an intuitive syntax and validate.

Decision:

The solution resulted in a small open source plugin called tFormer.js .

Key features and features:

• Independence - does not need jQuery (a rarity in our time);
• Large list of validation rules;
• All validation rules are short and intuitive - easy to remember and use;
• Combining and setting rules with just one data-attribute or through options when initializing a new tFormer object;
• A separate object that performs the validation of values ​​itself can be used outside the main plug-in or for additional complex validations;
• The “custom” validation function own () can be written by the developer for complex validations of a specific field;
• Changing the rules and settings of the validator “on the fly” (setRules () and set () methods);
• Control event submit and visual control submit button;
• Buttons for checking validation (check buttons);
• Variable validation event (by default, the event for validation is “input” and “keyup”);
• Timeout validation delays;
• Processing states;
• The ability to set options for both all fields and unique to each field;
• onerror and onvalid functions that work after validation;
• The before function is executed each time before validation;
• Validation on AJAX without strict rules for AJAX response (in the end (result) function, the developer must return true or false by himself, after processing the answer);
• Modification of error, processing and disabled classes;
• … And so on.

Installation and use:

1. Download;
2. Connect the script on the desired page;
3. Define a new tFormer object with the desired options.

HTML form example:

<form id="my_form_id"> <input type="text" name="zip" data-rules="a1 l=5" /> <input type="text" name="email" data-rules="* @" /> <input type="submit" value="Submit" /> </form> 

An example of a minimum tFormer definition:

 var my_form_id = new tFormer('my_form_id'); 

An example of a tFormer definition with modifications:

 var my_form_id = new tFormer('my_form_id', { errorClass: 'my_own_errorClass', //    ,     timeout: 666, //   disabledClass: 'i_am_disabled', onerror: function(){ //    console.log('The field with name `' + this.name + '` is not valid'); }, //   …. fields: { //       email: { timeout: 500 //     email } } }); 

A brief table of validation rules:

rules	Description
*	required field (value cannot be empty)
@ , @s , ip , base64 , url	email, comma-separated email, IP address, Base64 string, URL (respectively)
< , > , >= , <=	comparing field values ​​with numbers. (example " >=10 " - the field value must be greater than or equal to 10)
l= , l< , l> , l>= , l<=	comparison of the number of characters of the field value (example " l=5 " - the value should consist of 5 characters)
= , =#	comparison with a specific value (' =10 ', ' =some_value ') or with the value of some field with the specified id (' =#some_id ')
!= !	not equal to or does not contain (' !=some_value ' - not equal to 'some_value', ' !.com ' - does not contain '.com')
c , cv , cm , ca , cd	credit card validation (all types, visa, mastercard, amex, discover)
D=	comparison for compliance with the date format (for example, " D=YMD " - checks for year-month-date compliance)

Pieces of code:

Example of changing options and validation rules:

 my_form_id.set({timeout: 555}); //     my_form_id.setRules(' ', 'email'); //     -   

Separate object for validation (it is used by the main plugin and can be used separately from it):

 _v_('some value').validateWithRules('* l>5'); // => true 

Custom function validation of fields of a complex type (created by the developer as needed) ::

 var my_form = tFormer('my_form_id', { fields: { field_name: { own: function(){ var my_value = this.value; var is_ip = _v_(my_value).validateWithRules('* ip'); var is_email = _v_(my_value).validateWithRules('* @'); var is_url = _v_(my_value).validateWithRules('* url'); return (is_ip || is_email || is_url); } } } }); 

Methods to control the state of the form:

 //  /    my_form.submitButtonControl( true ); //  - submitButtonOn() my_form.submitButtonControl( false ); //  - submitButtonOff() //  /       my_form.processing( true ); //  - processingOn() my_form.processing( false ); //  - processingOff() //       my_form.lock(); my_form.unlock(); //      unlock()      lock() 

Plugin status:

The plugin has stepped over version 0.3 and is now in beta.
It works in new versions of browsers and even in IE8 (I had to be confused).
It lies on the githaba, it is done as much as possible and time, it waits for additional ideas and commits from all interested developers :)

Links

• The main (complete) documentation - http://tFormerjs.com
• Github repository - https://github.com/TjRus/tFormer.js