jVForms.js - cross-browser form checking polyfill

What is it?

1. Automatic verification of HTML forms of type text | textarea.
2. Verification of forms occurs on the attributes `required` and` pattern` and is designed primarily for browsers that do not support these attributes.
3. Built-in set of templates for quick use.
4. The ability to set the form submission handler to any HTML element by clicking both in the form and outside it.

So why?

')
Unfortunately, not all browsers are able to support such standard attributes as required and pattern , and unfortunately, not all and not always update browsers to the latest versions.

	Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
required	10.0	5.0+	9.6+	x	4.0+	2.3+	3.0+
pattern	10.0	5.0+	9.6+	x	4.0+	2.3+	3.0+

Well yes! So what to do?

You can use the competent jVForms.js polyfile , which does not take up much space, does not need settings (only sometimes), and does all the dirty work of checking forms for you.

But as?

Attach jVForms.min.js at the end of the document before the closing body tag and initialize it.

<script src="jVForms.min.js"></script> <script> jVForms.initialize(); </script> 

So what is next?

Add the attribute `required =“ required ”` in the form field, thus making the element required.

 <input type="text" name="field_1" value="" required="required"/> 

HTML required-attribute

Add the attribute `pattern =" RegExp "`, where `RegExp` is your regular expression for form validation.

 <input type="text" name="field_1" value="" required="required" pattern="^\d+$"/> 

HTML pattern-attribute

What is a regular expression?

If you are having difficulty adding a regular expression, you can use a pre-made set of templates by simply declaring them in a class.

 <input type="text" name="field_1" value="" class=""/> 

List of templates:

• vf-all: Any non-delimiter character
• vf-numInt: Integer
• vf-numFloat: Decimal number
• vf-notNum: Not a number
• vf-index: Index
• vf-wordUpper: Uppercase or US word in uppercase and (-) sign
• vf-wordLower: A lowercase word on Ru or US and a (-) sign
• vf-wordRuUpper: Upper-case word in Ru and the (-) sign
• vf-wordRuLower: A lower-case word on Ru and a (-) sign
• vf-wordUSUpper: Uppercase word on US and (-) sign
• vf-wordUSLower: The word for US is lowercase and the (-) sign
• vf-stringRu: Any string that does not contain US letters
• vf-stringUS: Any string that does not contain Ru letters
• vf-timeHM: Time in hour: minute format
• vf-dateDMY: Date in day / month / year format
• vf-dataDMYus: Date in month / day / year format
• vf-cc: Credit card in the format 9999 9999 9999 9999
• vf-phone: Number in the format 999 99 99 or 9999999 or 999-99-99 or 999-99 99
• vf-phoneDash: Number in the format (999) 999-9999 or (999) 999 9999
• vf-phoneAlong: Number in the format (999) 9999999

Templates can be declared any number, but only the first will work:

 <input type="text" name="field_1" value="" class="vf-numInt vf-wordUSLower vf-dataDMYus otherClass"/> 

When declaring the pattern attribute and template class, the template class will not work:

 <input type="text" name="field_1" value="" required="required" pattern="^\d+$" class="vf-numInt"/> 

If the `required =“ required ”` attribute is omitted and the template class or the `pattern` attribute is added, then this field is optional;
but if it is still filled, it will be checked:

 <input type="text" name="field_1" value="" class="vf-numInt"/> 

I do not fit submit!

To install a handler on any other element within the form, you need to add the vf-submit class to it:

 <form> <input type="text" required="required" name="name" class="vf-numInt"/> <input type="text" name="phone"/> <textarea name="area"></textarea> <span class="vf-submit"></span> </form> 

To install a handler on any other element outside the form, you must add the vf-submit class to it, and also associate this element with the form.
For this, the form must specify the id attribute or the name attribute and assign the value of this attribute as a class to an element to the handler:

 <form id="formId"> <input type="text" required="required" name="name" class="vf-numInt"/> <input type="text" name="phone"/> <textarea name="area"></textarea> </form> <span class="vf-submit formId" ></span> 

I want only errors.

jVForms is able to change the type of notification when the form is validated, for this there are three values:

• Off: turn off notifications;
• All: highlight the correct and incorrect fields;
• Error: highlight only invalid fields;

The default value is “All”. To change this value to “Off”, for example, you need to pass the following to the initialization function:

 <script> jVForms.initialize({ notice: 'Off' }); </script> 

And what is the result?

As a result, we received a small polyfil, which is simple as soap. Nowadays, in modern browsers, automatic field highlighting is built in, so when using jVForms.js , no conflicts or visual rejections occur.

Git: jVForms.js

Thanks for attention!

The demonstration is here!