Validation of HTML-forms and extension of functionality

Validations of HTML forms pay very little attention. For example, even on habrahabr.ru while I registered and logged in to the site several times I received an error message: either I entered the protection code incorrectly, then I specified email in the login instead of the login. And sometimes users make mistakes with the number of digits in the phone number or organization details, they confuse the Russian letter “c” with the English letter, when copying and pasting to Windows, extra spaces are added to the data.

Of course, all this is not fatal. But it would be extremely convenient for the data to be checked even before being sent to the server. Especially CAPTCHA, because it is often entered with an error.

There were several ways to solve this problem: HTML5, jQuery Validate, zForms.ru, and a number of lesser-known libraries. But all these methods had their drawbacks: HTML5 is not supported by all browsers and does not have the option not to send blank fields, set a message about the mismatch of a regular expression, limit the list of valid characters to enter in the field, the ability to glue the fields, send checkbox values ​​in csv format or sums values.

In zForms.ru there are no source codes, there is no possibility to indicate that checking by a user function is resource-intensive and should be done on the onChange event, and not onKeyup. The functionality is given by a very cumbersome design, which makes it difficult to design the form as we like it. And many parameters are passed in the form: onclick = “return {oOptions: {sPlaceHolder: 'no more than 10 characters', iMaxLength: 10}}”, which is not the easiest way for the webmaster.
')
jQuery Validate requires javascript and jQuery knowledge. Although it is clear that here you can program the HTML-form as you like.

But we needed a simple tool for the webmaster, where you could simply set additional attributes of the input, select tags, and all the functionality was connected automatically. So we wrote the library ITForms.class.js. The library is free and actively developed. Here is what is already supported:

1. <form ... data-dont-send-empty-fields = 1> - If data-dont-send-empty-fields = true in the form tag, then all unfilled input fields will be deleted before sending. Very convenient for search filters, when information is transmitted by the GET method.
2. <input ... data-min-length - the minimum number of characters for text fields. data-min-length = 1 means in essence that the field is required.
3. <input ... data-regexp - checks a text field for a regular expression.
4. <input ... data-enable-chars - a list of valid characters, other characters from the keyboard will not work.
5. <input ... data-placeholder - sets the Placeholder to the text field. It differs from the standard HTML5 implementation in that if you enter characters in the field and then set an empty value, the data-placeholder will not be shown so as not to confuse the user. You have the choice of what behavior to choose the standard - placeholder or data-placeholder.
6. <input | select ... data-help - creates a tooltip when setting the focus to a text field.
7. <select ... data-combobox - set combobox for current list.
8. <input ... data-min-value - the minimum value of the number and date;
9. <input ... data-max-value - the maximum value of the number and date;
10. <select multiple = "multiple" ... data-min-selected - the minimum number of selected items in select-multiple.
11. <select multiple = "multiple" ... data-max-selected - the maximum number of selected items in select-multiple.
12. <input type = file ... data-file-type - the type of files to be loaded. Several types can be specified, separated by commas.
13. <input | select ... data-user-func - call a user-defined function for additional verification. The user-defined function returns an error message or an empty string if successful verification. A user function can check the validity of a field depending on the values ​​of other form fields. It can also dynamically, depending on the field value, load AJAX with new new form fields, data, change other form fields. Example: data-user-func = "funcAlert ('1 parameter', '2 parameter');"
14. <input ... data-datepicker | data-datetimepicker | date-timepicker - set one of three calendars for the current field.
15. <input ... data-async - If data-async = true, then the value is checked after entering each character. If data-async = false, then the value of the field is checked after removing the focus from it or before sending.
16. <input ... data-slider - bind slider. See example for more details.
17. <input ... data-regexp-err-msg is an error message in case of a mismatch with a regular expression.

Public methods:
setCheckboxProperty (checkboxname, sendAs, minSelected, maxSelected);
// sendAs can be:
// 'csv' - then the values ​​of the selected checkboxes are sent in the form of checkboxname = v1, v2, v3 ... vn
// 'sum' - then the values ​​of the selected checkboxes are binary added s = v1 | v2 | v3 ... | vn and sent to checkboxname = s
// in other cases and if nothing is set, checkboxes are sent to the server in the standard form.
addMergeableField (fieldname, separator, inputs) // name of the field into which the values ​​of other fields will be glued, separator, list of fields to be combined
addEventListeners ($ ('jQuery selector')) // after dynamically adding an input element to the form, add event handlers for it.
itform.setRadioProperty ('radioinput', 1); // set required = 1 to make the selection mandatory.

See how it all works in action and you can download the library on the site itforms.ru

We welcome comments and suggestions.

- An important addition!

1. Thank you all once again for the comments, I have already implemented many of them. The next step is the introduction of basic types.

2. A big request to see the source code of itforms.class.js There are some jambs with the naming of variables and methods, somewhere the general style is broken, somewhere I have not picked up a good name. According to the style of arrangement of parentheses, tabs instead of spaces, etc. I will not argue, there is no reason to argue about tastes, but if there are comments on the case, I will be happy. It may well show up lapses, bugs.

The plans have the addition of languages. But first I want to debug the algorithm so that the code does not clutter up.