AJAX Form Validator
Developer
3rd Party (Commercial)
EE Version Support
- ExpressionEngine 1.x
- ExpressionEngine 2
Compatibility
If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.
- Updater
- Multi Site Manager
- Stand Alone Entry Form
- Low Variables
- Content Elements
- Better Workflow
- Matrix
- Grid
- Webservice
- Publisher
Requirements
- jQuery for the Control Panel
Add-On Type(s)
Plugin
Tags
This plugin enables you to validate fields of the form client-side. This add-on has been designed to be fully compatible with AJAX Babble, AJAX Captcha and AJAX Login.
It can use AJAX to query the database in the search for duplicate content. E.g. this plugin can query database
if comment submitted by the user duplicates some existing comment, or if the name
submitted by the user duplicates name taken by registered member. Also it is possible to forbid
duplicate content with exceptions. E.g. it is possible to forbid submitting name already taken by
registered member except in cases when user also enters email used by that registered member.
I. TAG PAIR exp:ajax_form_validator:script
exp:ajax_form_validator:script tag can have following parameters.
1) form_id - required. Allows you to specify HTML id attribute of the form.
2) submit_button_id required. Allows you to specify HTML id attribute
of the submit button of the form.
3) entry_id - required. Allows you to specify ID number of the entry.
In case AJAX Form Validator add-on is not used inside comment form the
value of this parameter should be “none”.
4) async_url - required. Allows you to specify URL of the template which will be requested by AJAX.
Full URL must be entered, i.e. containing “http://” part. Inside this parameter you can use
single variables {site_id}, {site_url}, {site_index} and {homepage}. The template specified as the value of this parameter should contain only {exp:ajax_form_validator:async} tag.
5) parse - required. This parameter *must* have the value “inward”.
6) invalid_input - Optional. Accepts two values: “alert” and “silence”.
Default value is “silence”. If the value is “alert”, then in cases when some
parameter’s value is invalid PHP alert is being shown;
if the value is “silence”, then in cases when some parameter’s value
is invalid plugin finishes its work without any alert being shown.
Set this parameter to “alert” for development, and to “silence” - for deployment.
7) add_callback_validation_success - Optional. Allows you to specify name of javascript function which
will be executed after successful validation of the form fields. This parameter supports pipe operator,
i.e. you can specify several names of javascript functions.
8) add_callback_validation_failure - Optional. Allows you to specify name of javascript function which
will be executed after the failure of the validation of the form fields. This parameter supports pipe operator,
i.e. you can specify several names of javascript functions.
9) add_callback_validation_success_args - Optional. Allows you to specify argument of javascript function which
will be executed after successful validation of the form fields. This parameter supports pipe operator, i.e. you can
specify arguments of several javascript functions. The order of arguments should follow the order of functions in
“add_callback_validation_success” parameter. If some functions should have arguments and other functions shouldn’t,
specify “null” or “0” (without quotation marks) as arguments for the latter.
A special constant ‘triggerSubmitClick’ can be used as the value of this parameter, e.g.
add_callback_validation_success_args="'triggerSubmitClick'"
This constant means that you need to defer Submit button’s click event until your validation success callback function will finish its work.
To defer click event you will need also to change your validation success callback function this way:
function my_validation_success_callback(triggerSubmitClick) {
some code
triggerSubmitClick();
}
10) add_callback_validation_failure_args - Optional. Allows you to specify argument of javascript function which
will be executed after the failure of the validation of the form fields. This parameter supports pipe operator, i.e. you can
specify arguments of several javascript functions. The order of arguments should follow the order of functions in
“dd_callback_validation_failure” parameter. If some functions should have arguments and other functions shouldn’t,
specify “null” or “0” (without quotation marks) as arguments for the latter.
11) form_submit_ajax - optional. Allows you to specify if the whole form is being submitted by AJAX or
after submitting of the form a page specified as the value of “action” attribute of the form
will be loaded. Possible values are “yes” (form will be submitted by AJAX) and “no” (after submittion the page
specifies as “action” will be loaded). Default value is “yes”.
12) error_message_delimiter - optional. Allows you to specify the delimiter string using which javascript error messages
will be joined and then displayed in single javascript dialog instead of being displayed in several dialogs.
E.g. error_message_delimiter=”\n\n”
II. SINGLE VARIABLE ajax_form_validator
Inside tag pair exp:ajax_form_validator:script there can be any number of “ajax_form_validator”
single variables. The variable “ajax_form_validator” can have following parameters.
1) field - required. Allows you to specify HTML name attribute of the field whose value should be validated.
2) invalid_indicator_id - optional. Allows you to specify HTML id attribute
of the element which will act as the indicator of the field value being invalid.
3) invalid_class - optional. Allows you to specify HTML class attribute
of the element which will act as the indicator of the field value being invalid.
4) valid_indicator_id - optional. Allows you to specify HTML id attribute
of the element which will act as the indicator of the field value being valid.
5) valid_class - optional. Allows you to specify HTML class attribute
of the element which will act as the indicator of field value being valid.
6) process_indicator_id - optional. Allows you to specify HTML id attribute
of the element which will act as the indicator of the field value being validated.
7) process_class - optional. Allows you to specify HTML class
attribute of the element which will act as the indicator of the field value being validated.
8) alert_container_id - optional. Allows you to specify HTML id attribute of the
element inside which the values of such parameters as “field_required_alert_text”,
“min_length_alert_text”, “max_length_alert_text”, “regex_alert_text”, “duplicate_data_alert_text”
should be displayed.
9) alert_container_class - optional. Allows you to specify HTML class attribute of the
element inside which values of such parameters as “field_required_alert_text”,
“min_length_alert_text”, “max_length_alert_text”, “regex_alert_text”, “duplicate_data_alert_text” should be displayed.
10) javascript_alert - optional. Possible value is “yes”. “yes” means that the values
of such parameters as “field_required_alert_text”, “min_length_alert_text”, “max_length_alert_text”,
“regex_alert_text”, “duplicate_data_alert_text” should be displayed inside javascript alert dialog.
11) validation_start_on - optional. Allows you to specify javascript event which
will trigger validation of the field value. Possible values are “keyup”, “blur” and “click”.
“keyup” means that validation will start when “keyup” event will be trigered by the field.
“blur” means that validation will start when field will loose focus.
“click” means that validation will start when user will click form’s submit button.
Default value is “keyup”.
12) validation_show_result_on - optional. Allows you to specify javascript event which
will trigger display of validation results. Possible values are “keyup”, “blur” and “click”.
“keyup” means that validation results will be displayed when “keyup” event will be trigered by the field.
“blur” means that validation results will be displayed when field will loose focus.
“click” means that validation results will be displayed when user will click form’s submit button.
Default value is “click”. This parameter supports pipe character, e.g. validation_show_result_on=“keyup|click”.
13) required - optional. Allows you to specify if the field is required (value “yes”), i.e. cannot be left empty.
14) field_required_alert_text - optional. Allows you to specify what text should be displayed
in case when required field is left empty.
15) exact_value - optional. Allows you to specify that the field must contain certain exact value in order to validate.
E.g. exact_value=“y”
16) exact_value_alert_text - optional. Allows you to specify what text should be displayed
in case when the field does not have the value defined in “exact_value” parameter.
17) min_length - optional. Allows you to specify minimal length of field’s value.
18) min_length_alert_text - optional. Allows you to specify what text should be displayed
in case when field’s value is shorter than it’s minimal length.
19) max_length - optional. Allows you to specify maximal length of field’s value.
20) max_length_alert_text - optional. Allows you to specify what text should be displayed
in case when field’s value is longer than it’s maximal length.
21) regex - optional. Allows you to specify javascript’s regular expression against which field’s value
should be validated.
22) regex_alert_text - optional. Allows you to specify what text should be displayed
in case when field’s value does not validate against regular expression.
23) deny_duplicate_data_field - optional. Allows you to specify *database* field name
which should be queried in search for duplicate content. This parameter supports pipe
operator. Field names should be adjoined by relevant database table names.
E.g. deny_duplicate_data_field=“exp_members.screen_name|exp_members.username”
24) duplicate_data_exception_field - optional. Allows you to specify *database* field name
which should be queried in search for duplicate content exception. This parameter supports pipe
operator. Field names should be adjoined by relevant database table names.
E.g. duplicate_data_exception_field=“exp_members.email”
25) duplicate_data_exception_contained_in - optional. Allows you to specify *form* field name
which contains duplicate data exception. E.g. duplicate_data_exception_contained_in=“email”
26) check_duplicate_data_on_condition - optional. Allows you to specify *javascript* statement,
which, if evaluated to true, would allow checking for duplicate data, and would not allow
checking for duplicate data if evaluated to false.
NOTICE 1. the value of this parameter should be contained inside *single* quotes.
NOTICE 2. all quotes inside javascript statement should be *double* quotes.
NOTICE 3. curly quotes { and } inside javascript statement should be encoded as :LD: and :RD: respectively;
in case curly quotes belong to ExpressionEngine’s tag, they should be left if the tag is parsed earlier than
exp:ajax_form_validator:script tag, but they should be encoded if the tag is parsed later.
E.g.
check_duplicate_data_on_condition='document.getElementById("my_form")["certain_field"].value!="some_value"'
27) duplicate_data_alert_text - optional. Allows you to specify what text should be displayed
in case when user tries to submit duplicate data.
28) deny_different_data_field - optional. Allows you to specify *database* field name
which should be queried in search for different content. This parameter supports pipe
operator. Field names should be adjoined by relevant database table names.
E.g. to forbid entering in “Forgot password” form an email which is not present in the database
you will use deny_different_data_field=“exp_members.email”
29) different_data_alert_text - optional. Allows you to specify what text should be displayed
in case when user tries to submit data which must be the same as the data in the database, but isn’t.
30) validate_logged_in - optional. Allows you to specify if the field should be validated in case
user is logged in. Possible values are “yes” and “no”. Default value is “yes”. It could be useful to set
the value of this parameter to “no” for certain fields in case login form uses AJAX, i.e. user can login
without refreshing of the page.
31) required_similarity_field - optional. Allows you to specify *form* field name
which contains value the value of current fiels must be similar to. E.g. if the current field is “password_confirm”
then the value of “required_similarity_field” might be “password”. This parameter supports pipe operator.
32) required_similarity_type - optional. Allows you to specify type of required similarity between values of the fields.
Possible values are: “same”, “isame”, “uppercase”, “lowercase”, “reverse”, “ireverse”, “substring”, “isubstring”.
“same” means that the values of two fields must consist of the same characters in the same order, case-sensitive.
“isame” means that the values of two fields must consist of the same characters in the same order, case-insensitive.
“uppercase” means that the value of current field must be uppercase of the value of the required similarity field.
“lowercase” means that the value of current field must be lowercase of the value of the required similarity field.
“reverse” means that the values of two fields must consist of the same characters in reverse order, case-sensitive.
“ireverse” means that the values of two fields must consist of the same characters in reverse order, case-insensitive.
“substring” means that the value of current field must be substring of the value of the required similarity field, case-sensitive.
“substring” means that the value of current field must be substring of the value of the required similarity field, case-insensitive.
“superstring” means that the required similarity field must be substring of the value of the current field, case-sensitive.
“isuperstring” means that the required similarity field must be substring of the value of the current field, case-insensitive.
This parameter supports pipe operator. E.g. required_similarity_type=“same”
33) required_similarity_alert_text - optional. Allows you to specify what text should be displayed
in case when the value of the current field and the value of required similarity field do not have
similarity of the relevant type.
34) forbidden_similarity_field - optional. Allows you to specify *form* field name
which contains value the value of current fiels must not be similar to. E.g. if the current field is “password”
then the value of “required_similarity_field” might be “username”. This parameter supports pipe operator.
35) forbidden_similarity_type - optional. Allows you to specify type of forbidden similarity between values of the fields.
Possible values are: “same”, “isame”, “uppercase”, “lowercase”, “reverse”, “ireverse”, “substring”, “isubstring”.
“same” means that the values of two fields cannot consist of the same characters in the same order, case-sensitive.
“isame” means that the values of two fields cannot consist of the same characters in the same order, case-insensitive.
“uppercase” means that the value of current field cannot be uppercase of the value of the required similarity field.
“lowercase” means that the value of current field cannot be lowercase of the value of the required similarity field.
“reverse” means that the values of two fields cannot consist of the same characters in reverse order, case-sensitive.
“ireverse” means that the values of two fields cannot consist of the same characters in reverse order, case-insensitive.
“substring” means that the value of current field cannot be substring of the value of the required similarity field, case-sensitive.
“substring” means that the value of current field cannot be substring of the value of the required similarity field, case-insensitive.
“superstring” means that the required similarity field cannot be substring of the value of the current field, case-sensitive.
“isuperstring” means that the required similarity field cannot be substring of the value of the current field, case-insensitive.
This parameter supports pipe operator. E.g. forbidden_similarity_type=“isame|uppercase|lowercase|ireverse|isubstring”
36) forbidden_similarity_alert_text - optional. Allows you to specify what text should be displayed
in case when the value of the current field and the value of required similarity field do have
similarity of the forbidden type.
III. THE TAG exp:ajax_form_validator:async
This is a single tag. It has no parameters. This tag should
be the only content of the template whose URL is the value of
“async_url” parameter of exp:ajax_form_validator:script tag.
IV. USAGE
Create two templates: my_template_group/ajax_form_validator and my_template_group/ajax_form_validator_async
Contents of the template “ajax_form_validator_async” should consist of single tag:
{exp:ajax_form_validator:async}
Contents of the template “ajax_form_validator” (change in it values of the parameters “entry_id” and “async_url”):
<html>
<head>
<style>
.invalidated {
background: #ffbcbc
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>AJAX Form Validator</h1>
<p>
This plugin enables you to validate fields of the form client-side.
</p>
<p>
Try to submit form by entering something which is forbidden by the code of this add-on:<br>
1) some name which is in use by registered member<br>
2) invalid email, such as name@google.<br>
3) invalid URL, such as http://www<br>
4) name which consits of 1 character<br>
5) name which includes non-alphanumeric characters<br>
6) comment which is longer than 50 characters<br>
7) comment which exacly duplicates existing comment
8) leaving name or email or comment field empty
</p>
{exp:ajax_form_validator:script entry_id="3778" form_id="comment_form" submit_button_id="submit_button" async_url="{homepage}/my_template_group/ajax_form_validator_async/" parse="inward"}
{ajax_form_validator field="name" required="yes" deny_duplicate_data_field="exp_members.screen_name|exp_members.username" duplicate_data_exception_field="exp_members.email" duplicate_data_exception_contained_in="email" field_required_alert_text="ERROR!\nName field cannot be empty!" invalid_indicator_id="name_field" invalid_class="invalidated" javascript_alert="yes" min_length="2" max_length="30" regex="/^[a-zA-Z0-9]+([\.\_\-][a-zA-Z0-9]+)*$/" min_length_alert_text="ERROR!\nThe name cannot consist of one letter." max_length_alert_text="ERROR!\nThe name cannot be longer than 30 characters." duplicate_data_alert_text="ERROR!\nThe name you entered is already in use by a registered member." regex_alert_text="ERROR!\nThe name you entered contains illegal characters or character combinations."}
{ajax_form_validator field="email" required="yes" deny_duplicate_data_field="exp_members.email" duplicate_data_exception_field="exp_members.screen_name|exp_members.username" duplicate_data_exception_contained_in="name" field_required_alert_text="ERROR!\nEmail field cannot be empty!" invalid_indicator_id="email_field" invalid_class="invalidated" javascript_alert="yes" max_length="50" max_length_alert_text="ERROR!\nThe email address cannot be longer than 50 characters." regex_alert_text="ERROR!\nInvalid email address." duplicate_data_alert_text="ERROR!\nThe email you entered is already in use by a registered member." regex="/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]:LD:2,6:RD:$/i"}
{ajax_form_validator field="location" invalid_indicator_id="location_field" invalid_class="invalidated" javascript_alert="yes" max_length="50" regex="/^([0-9a-zA-Z\s]*)$/" max_length_alert_text="ERROR!\nThe location cannot be longer than 50 characters." regex_alert_text="ERROR!\nLocation contains illegal characters."}
{ajax_form_validator field="url" invalid_indicator_id="url_field" invalid_class="invalidated" javascript_alert="yes" max_length="75" max_length_alert_text="ERROR!\nWebsite\'s URL cannot be longer than 75 characters." regex_alert_text="ERROR!\n Invalid website\'s URL address." regex="/(^http:\/\/$)|(^(http|https)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]:LD:2,4:RD:(\/\S*)?$)/"}
{ajax_form_validator field="comment" required="yes" deny_duplicate_data_field="exp_comments.comment" field_required_alert_text="ERROR!\nComment cannot be empty!" invalid_indicator_id="comment_field" invalid_class="invalidated" javascript_alert="yes" max_length="50" max_length_alert_text="ERROR!\nThe comment cannot be longer than 50 characters." duplicate_data_alert_text="ERROR!\nSubmitting duplicate content not allowed."}
{/exp:ajax_form_validator:script}
{exp:comment:form entry_id="3778" preview="site/comment_preview"}
<p>Name (required)<br />
<input type="text" id="name_field" name="name" value="{name}" /></p>
<p>Mail (required; will not be published)<br />
<input type="text" id="email_field" name="email" value="{email}" /></p>
<p>Location<br />
<input type="text" id="location_field" name="location" value="{location}" /></p>
<p>Website<br />
<input type="text" id="url_field" name="url" value="{url}" /></p>
<textarea name="comment" id="comment_field" rows="15" cols="48">{comment}</textarea>
<p><input type="submit" id="submit_button" name="submit" value="Submit" /></p>
{/exp:comment:form}
<ul>
{exp:comment:entries entry_id="3778" limit="100" orderby="date" sort="asc" paginate="top" dynamic="off"}
{paginate}
<p>Page {current_page} of {total_pages} pages {pagination_links}</p>
{/paginate}
<li>
<div>{absolute_count}. {url_as_author} at {comment_date format='%m/%d - %h:%i %A'} said:</div>
<blockquote>{comment}</blockquote>
</li>
{/exp:comment:entries}
</ul>
</body>
</html>
AJAX Form Validator Links
- AJAX Form Validator demo
- AJAX Form Validator together with AJAX Captcha demo
- AJAX Babble used together with AJAX Captcha and AJAX Form Validator demo
This entry was created November 1, 2010, 1:21 pm.
This entry was last updated January 9, 2013, 12:49 pm.
Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!
Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.
There are no reviews for this add-on yet.
What are you waiting for? Rate it and review it!