Good day.
In this topic, I will talk about a convenient jQuery plugin for validating web forms, simple and powerful, moreover, it is completely redundant. If you are not interested in the details of the creation and comparison with analogues (more precisely, with an analog), see the end of the topic, there is a link to examples and source code.

Some time ago I had to refine the client-side of the resource, including just an incredible number of questionnaire forms. One of the unpleasant features of these forms was the eerie number of different types of input validation rules and an even greater number of relationships between fields.
Example: if the checkbox A is selected, then only numbers can be entered in the X field, and the Y field should be hidden, but if the Z radio button is additionally selected, then the Y field should be shown, and everything except numbers can be entered in the X field.
In other words - a living hell, born unhealthy mind marketers.



Despite the fact that there are a considerable number of ways to validate the contents of input fields (up to standard browser ... only, unfortunately, not cross-browser), there was only one suitable client solution that allowed to establish complex relationships between several fields - the ZForms framework, which was originally used on the resource. Perhaps, on the fact that he was able to do it, his advantages ended and then solid cons began:
- An unobvious and inconvenient way of setting validation rules in the onclick (!) Handler. There is still an undocumented way of setting these rules through XML-like inserts directly into the code of the page, but this is even more terrifying.
- The framework modifies the DOM tree, while requiring special conditions for its structure. For example, the property that is changed during validation is not applied to the field, but ... to its ancestor of the second (!!) order, which had to be taken into account during layout.
- Validated controls, in fact, are replaced by the framework widgets, even where it is not required. In most cases this means that it is impossible to use any other means of working with the field. Do not describe in words how much evil I generated by crossing the ZForms with the jQuery UI ...
- Disgusting event model work. ZForms works only with the events of its own widgets, and you can only subscribe to them. It got to the point that you had to hang up checking the validity of the timer.
- A bunch of bugs (getting out, as usual, already on production), which had to be corrected by getting into the minimized code of the framework, or by crushing this code with their own.
')
And, in the end, the latest version of ZForms was released in 2009, and its jQuery version did not want to work with the latest versions of the library at all.
In general, there was clearly the case when it was necessary to roll up the sleeves and solve the problem from scratch. I did this by writing jquery.lemongrab.

The main ideas of lemongrab are:
- The plugin is not trying to be something that it is not. He does one task, but he does it well.
- The plugin uses the features of HTML5, while leaving the opportunity to work on older browsers.
- Validation is set most conveniently for a particular case.
- Plugin does not conflict with other handlers.

The work of the plugin was tested on all modern and not very browsers, both desktop and mobile. As a result, it all depends on the version of jQuery used - problems (however, easily solved) arose only on IE less than version 9.

What can lemongrab do?

- The plugin is able to check the status of any input fields, and depending on the specified rules, change the state of the elements (the same, or any other). Changeable states: validity, commitment, accessibility, visibility.
If everything is clear with accessibility and visibility (this is, respectively, an attribute of the enabled and css-property display), then about the validity and commitment should be explained. Both are peeped in the same ZForms; in essence, these attributes are simply classes added to the field in case it is valid / non-valid and in case it must be filled in (in this case the HTML5 attribute is also required). The plugin will not give a form in which there are fields with such attributes (although this is configurable).
- The plugin has a simple and obvious event model. An event happened, say, an element became valid, - an event lemongrab.valid was generated for it. Has ceased to be valid - lemongrab.novalid has been generated.
- The rules are set in JSON, which can be registered both directly in the data attribute of the element being validated and loaded when the plug-in is initialized. The first is convenient to set the rules directly in the page code, the last - when removing the rules to a separate file (ZForms, by the way, does not know how).
- For validation, simple properties can be used (for example, checked / unchecked for checkbox), regular expressions, the state of field sets, and even jQuery selectors. If this is not enough, you can use a custom function to check the status.
- The number of rules for an element is unlimited, and they can be combined in any way. The plugin can set the logic of combining rules (and / or / not), for more complex options there are all the same user-defined functions.
- In the plugin a lot of any small extra plush described in the documentation.

What does this look like?
A couple of illustrative examples:

The field will be valid (it will add the class ACCEPTABLE), if its contents match the regexp:

<form id="sample"> <input type="text" data-rule-valid='[{"key":"regexp","value":"^.{1,5}$"}]' /></code> <script>$("#sample").lemongrab();</script> </form> 

The field # id2 will be available for input if the second radio button is selected:

 <form id="sample"> <fieldset id="selectbox"> <input type="radio" name="test" value="1" id="1" /> <input type="radio" name="test" value="2" id="2" /> <input type="radio" name="test" value="3" id="3" /> <input type="radio" name="test" value="4" id="4" /> </fieldset> <input type="text" data-rule-enabled='[{"key":"c", "selector":"#3"}]' /> <script>$("#sample1").lemongrab();</script> </form> 

Documentation and interactive examples .

Since I wrote this thing, my life has become deceptive and loving, which I wish you, and therefore I am putting the code in open access: the repository on github .