Forms JS Validation

Introduction

This little plugin will add JavaScript validation to exisiting forms. No more hacking in the JS files, just one plugin which will handle all the stuff for you. It is compatible with all kind of forms, even with the form module from DevDemon

Image

Documentation versions

Installation

Prerequisites

Make sure your system meets the minimum requirements:

Installation Instructions

Update instructions

Get started

First of all you have to add the {exp:forms_js_validation:init} method in the <head> of the page. This method will add all necessary javascript and css to you page to get the plugin fully working. See here the tags that the init function can accept.

After weve added theinitmethod to thewe can start creating the validation rules for our forms. This can be done by putting{exp:forms_js_validation:add}just above every

` we have on our page. See here the tags that the add function can accept or here the validation rules for the add function.

Init Tag

Init the plugin. This wil add some javascript and css to the page before the validation. Normally you will add this in the of the page

The tag

{exp:forms_js_validation:init}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

lang

Set the language

lang="" if latlng is empty

css_location

Sets the location for the validation stylesheet. Default is /themes/third_party/forms_js_validation/css/validationEngine.jquery.css

css_location=""

Add Tag

This will validate an form, normally placed just above a form.

The tag

{exp:forms_js_validation:add}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

selector

Set the selector for your form

selector=""

input_element_wrapper

Set the main class of the wrapper which surround your input

input_element_wrapper=".control-group"

promt_position

Set the position for the promt message. Possible options top-left top-right bottom-left center-right bottom-right

promt_position=""

require_class

a class name for the require input fields. <input class="required"/>

require_class="" (without a dot)

email_class

a class name for the require email input fields <input class="email_class"/>

email_class="" (without a dot)

group_class

At least one of the field of the group must be filled. It needs to be given a group name that is unique across the form. '[group_class]:[group_name]' <input class="group:payments"/>

group_class="" (without a dot)

min_class

Validates when the field's value is less than, or equal to, the given parameter. '[min_class]:[min_value]' <input class="min:5"/>

min_class="" (without a dot)

max_class

Validates when the field's value is more than, or equal to, the given parameter. '[max_class]:[max_value]' <input class="max:15"/>

max_class="" (without a dot)

min_size_class

Validates if the element content size (in characters) is more than, or equal to, the given integer. '[min_size_class]:[min_size_value]' <input class="min_size:5"/>

min_size_class="" (without a dot)

max_size_class

Validates if the element content size (in characters) is less than, or equal to, the given integer. '[max_size_class]:[max_size_value]' <input class="max_size:5"/>

max_size_class="" (without a dot)

integer_class

Validates if the field is a integer, with an optional sign. ie. -635 +2201 738 <input class="val_integer"/>

integer_class="" (without a dot)

number_class

Floating points with an optional sign. ie. -143.22 or .77 but also +234,23 <input class="val_number"/>

number_class="" (without a dot)

phone_class

a typical phone number with an optional country code and extension. Note that the validation is relaxed. <input class="val_phone"/>

phone_class="" (without a dot)

url_class

Matches a URL such as http://myserver.com, https://www.crionics.com or ftp://myserver.ws <input class="val_url"/>

url_class="validation_url" (without a dot)

date_class

An ISO date, YYYY-MM-DD <input class="val_date"/>

date_class="" (without a dot)

ipv4_class

An IP address (v4) ie. 127.0.0.1 <input class="val_ip"/>

ipv4_class="" (without a dot)

equals_class

Match an field with an other <input class="equals:field_12"/>

equals_class="" (without a dot)

past_class

Checks if the element's value (which is implicitly a date) is earlier than the given date. When "NOW" is used as a parameter, the date will be calculate in the browser. When a "#field name" is used ( The '#' is optional ), it will compare the element's value with another element's value within the same form. Note that this may be different from the server date. Dates use the ISO format YYYY-MM-DD <input class="date past:now"/>

past_class="validation_past" (without a dot)

future_class

Checks if the element's value (which is implicitly a date) is greater than the given date. When "NOW" is used as a parameter, the date will be calculate in the browser. When a "#field name" is used ( The '#' is optional ), it will compare the element's value with another element's value within the same form. Note that this may be different from the server date. Dates use the ISO format YYYY-MM-DD <input class="date future:now"/>

future_class="validation_future" (without a dot)

creditcard_class

Validates that a credit card number is at least theoretically valid, according the to the Luhn checksum algorithm, but not whether the specific card number is active with a bank, etc. <input class="val_creditcard"/>

creditcard_class="" (without a dot)

validation_condition

This makes the field required, but only if any of the referred fields has a value. <input class="condition:field10"/>

condition_class="validation_condition" (without a dot)

Javascript Callbacks

When ajaxFormValidation is turned on, this is the function that will be called before the asynchronous AJAX form validation call. May return false to stop the Ajax form validation

onBeforeAjaxFormValidation(form, options)

When ajaxFormValidation is turned on, this function is used to asynchronously process the result of the validation. the status is a boolean. If true, the ajax call completed and all the server side form validations passed.

onAjaxFormComplete(status, form, errors, options)

When onValidationComplete defined, it stops by default the form from auto-submitting, and lets you handle the validation status via a function. You can also return true in this function and the form will be allowed to submit.

onValidationComplete: function(form, status)

If onSuccess is set, this callback function will be called when all validations passed.

onSuccess : function()

If onFailure is set, this callback function will be called when it found an error.

onFailure: function()

Example usage

{exp:forms_js_validation
  selector=".test"
  input_element_wrapper=".control-group"
}

<script>
  JS_FORMS.addCallbackEvent('onBeforeAjaxFormValidation', '{count}', function(form, options){
    console.log(form, options);
  });
<script>

{/exp:forms_js_validation}

Notice the {count} var. This is required because the plugin will store the callback temporarily to match the correct form.

JS functions

The refresh function will reinit the validation functions on all the forms. It can be used for example by loading a form via Ajax.

JS_FORMS.refresh()

Custom Error Messages

The following attribute's value will be loaded for the relative validation rule:

data-errormessage-value-missing

<input type="text" data-errormessage-value-missing="Your custom error message" />

data-errormessage-type-mismatch

<input type="text" data-errormessage-type-mismatch="Your custom error message" />

data-errormessage-pattern-mismatch

<input type="text" data-errormessage-pattern-mismatch="Your custom error message" />

data-errormessage-range-underflow

<input type="text" data-errormessage-range-underflow="Your custom error message" />

data-errormessage-range-overflow

<input type="text" data-errormessage-range-overflow="Your custom error message" />

data-errormessage-custom-error

<input type="text" data-errormessage-custom-error="Your custom error message" />

data-errormessage

a generic fall-back error message

<input type="text" data-errormessage="Your custom error message" />

Changelog

2.1.0 (19-12-2018)

2.0.2 (09-11-2016)

2.0.1 (05-07-2016)

2.0.0 (05-07-2016)

1.7.1

1.7

1.6.2

1.6.1

1.6

1.5.8

1.5.7

1.5.6

1.5.5

1.5.4

1.5.3

1.5.2

1.5.1

1.5

1.4.3

1.4.2

1.4.1

1.4

1.3.1

1.3

1.2

1.1.2 :

1.1.1 :

1.1:

1.0.1:

added : new param : add_base_files="yes" when the first validation is in a if statement and not is showing

1.0 :