/*
------------ JavaScript Config ------------
===========================================
List of default validation rules for field:
===========================================
-----------------------------------
field is always mandatory
required: true/false
-----------------------------------
value should be proper email address
email: true/false
-----------------------------------
value should be proper url
url: true/false
-----------------------------------
value should be integer - 2, 67, -234
integer: true/false
-----------------------------------
value should be integer or float - 2, 67.4, -234, 0.45
number: true/false
-----------------------------------
minimal length of the value, integer
minlength: 3,
minlength: 10
-----------------------------------
maximal length of the value, integer
maxlength: 3,
maxlength: 10
-----------------------------------
range length of the value, array with two integers
rangelength: [2, 5],
rangelength: [1, 10]
-----------------------------------
field value should be greater than rule value, integer/float
minvalue: 5,
minvalue: -10.5
-----------------------------------
field value should be less than rule value, integer/float
maxvalue: 5,
maxvalue: -10.5
-----------------------------------
field value should be in range of values, array with two integers/floats
rangevalue: [-1, 100],
rangevalue: [5, 10.5]
-----------------------------------
field value should be equal to other field value
use "id" attribute from target field
equalTo: "#email",
equalTo: "#password"
-----------------------------------
set a quantity of required values from the group
specify "class" attribute for every field which should be a part of the group
requiredFromGroup: [1, ".group_1"]
requiredFromGroup: [2, ".group_2"]
-----------------------------------
==========================================
List of default validation rules for file:
==========================================
-----------------------------------
file is NOT mandatory, but if user adds a file - validate it
validate: true/false
----------------------------------
file is ALWAYS mandatory
required: true/false
-----------------------------------
file size, Mb
if it is not an integer - use .(point) as a delimiter
size: 1
size: 0.5
-----------------------------------
file extension, use "|" as a delimiter
default abbreviation for available formats:
jpeg|jpg|tiff|png|gif|ico|xls|xlsx|docx|doc|txt|csv|zip|gzip|rar|odf|pdf|powerpoint|mpeg|mp4|ogg
extension: jpg|jpeg|png
-----------------------------------
==========================================
NOTE:
List of special cases:
==========================================
-----------------------------------
1) No matter javascript config contains validation rules for a value or not - this value will be sent to server
DO NOT RELY ON JAVASCRIPT VALIDATION ONLY! ALWAYS APPLY THE SERVER SIDE VALIDATION!
-----------------------------------
2) In case you do not want to apply javascript validation for a field:
- comment out validation rules and messages for a field
For example:
rules: {
// name: {
// required: true
// }
},
messages: {
// name: {
// required: "Name is required"
// }
}
- set "false" for "required" rule for field
For example:
rules: {
name: {
required: false
}
},
messages: {
name: {
required: "Name is required"
}
}
- do not add a field to "rules" and "messages" arrays at all
-----------------------------------
3) If a field has css "display:none;" or "visibility:hidden;" or an attribute 'disabled="true"' - this field
will not be validated, even if it has "required: true" validation rule. This feature may be used
for javascript logic, "show\hide" features, etc
*/
$( document ).ready( function(){
$( "#formId" ).justFormsPro({
/************************************************/
/* User settings */
/************************************************/
/* Validation rules for fields */
rules:{
/* NOTE: */
/* javascript config doesn't contain validation rules */
/* for php security token and google recaptcha - these fields are validated on server only */
/* user field name */
/* field name should be the same as at html "name" attribute at html form code */
/* example - <input name="user_field_name" /> */
/* detailed description of every rule - at the top of this file */
user_field_name: {
required: true,
email: true,
url: true,
integer: true,
number: true,
minlength: 3,
maxlength: 8,
rangelength: [2, 12],
minvalue: 5.5,
maxvalue: 10,
rangevalue: [5, 10],
equalTo: "#email",
requiredFromGroup: [1, ".group"]
},
/* NOTE: */
/* to validate a field which may have several values - group of checkboxes, multiple dropdown:
- you have to add [] to the field in html code - <select name="multiple_dropdown[]" multiple="" />
- you have to add "" and [] to the field name in "rules" and "messages" arrays */
"multiple_dropdown[]": {
required: true
},
"checkbox_group[]": {
required: true
},
/* user file name */
/* field name should be the same as at html name attribute at html form code */
/* example - <input type="file" name="file_name_1" /> */
/* detailed description of every rule - at the top of this file */
file_name_1: {
/* file is NOT mandatory, but if user adds a file - validate it */
validate: false,
/* file is ALWAYS mandatory */
required: false,
/* file size, Mb (if less than 1 - delimiter should be .) */
size: 1,
/* file extension, use "|" as a delimiter */
extension: "jpg|jpeg|png",
},
file_name_2: {
/* file is NOT mandatory, but if user adds a file - validate it */
validate: false,
/* file is ALWAYS mandatory */
required: false,
/* file size, Mb (if less than 1 - delimiter should be .) */
size: 1,
/* file extension, use "|" as a delimiter */
extension: "jpg|jpeg|png",
},
},
/* Error messages for fields */
messages:{
user_field_name: {
required: "Field is required",
email: "Incorrect email format",
url: "Incorrect url format",
integer: "Field only integer allowed",
number: "Field only numbers allowed",
minlength: "Field min lengtn 3 chars",
maxlength: "Field max lengtn 8 chars",
rangelength: "Field range length from 2 to 12",
minvalue: "Field value not less than 5.5",
maxvalue: "Field value not greater than 10",
rangevalue: "Field range value from 5 to 10",
equalTo: "Field value should be equial to email",
requiredFromGroup: "One field is required from .group"
},
"multiple_dropdown[]": {
required: "Dropdown is required"
},
"checkbox_group[]": {
required: "At least one checkbox is required"
},
/* pay attention - one error message for both rules: file size and file extension */
/* the name of this rule should be "size_extension" */
file_name_1: {
required: "file_name_1 is required",
size_extension: "file_name_1 types: jpg, png. Size: 1Mb",
},
file_name_2: {
required: "file_name_2 is required",
size_extension: "file_name_2 types: jpg, png. Size: 1Mb",
},
},
/************************************************/
/* end User settings */
/************************************************/
/************************************************/
/* Form settings */
/************************************************/
/* debug mode, script's javascript errors will be shown in the console */
/* default: false */
debug: false,
/* send data on server after successful validation */
/* default: true */
submit: true,
/* validation errors processing */
error: {
/* scroll a form to first element with error */
/* default: true */
scroll: true,
/* highlight field with error */
/* default: true */
highlight: true,
/* show error within a block <div class="j-response"></div> */
/* default: false */
inBlock: false,
/* show error under a field */
/* default: true */
underField: true,
/* show error within tooltip */
/* default: false */
inTooltip: false,
/* define position of error tooltip
available positions:
- j-tooltip-right-top
- j-tooltip-right-bottom
- j-tooltip-right-side
- j-tooltip-left-top
- j-tooltip-left-bottom
- j-tooltip-left-side */
/* default: "j-tooltip-right-top" */
inTooltipClass: "j-tooltip-right-top"
},
/* successful validation result processing */
success: {
/* highlight field with successful validation */
/* default: true */
highlight: true
},
/* validation events */
validationEvent: {
/* validate form when "Submit" button is clicked */
/* default: true */
onsubmit: true,
/* validate field when it is changed, when focus is lost */
/* default: true */
onchange: true,
/* validate field for every keyboard click */
/* default: true */
onkeyup: true,
},
/* form types */
formType: {
/* make a form modal - more details "Modal Form" section in the docs */
/* do not forget to add a button/link for open modal form to the html code */
/* default: false */
modal: false,
/* make a form multistep - more details "Multistep Form" section in the docs */
/* default: false */
multistep: false,
},
/* form redirection */
formRedirect: {
/* redirect a form after successful submission */
/* default: false */
redirect: false,
/* page address for redirection */
address: "http://google.com"
},
/* "Thank you" block */
formHide: {
/* show "Thank you" block after successful form submission */
/* default: false */
hide: false,
/* add "Close" button for "Thank you" block */
/* default: false */
closeBtn: false
},
/* show all form data in the block */
/* default: false */
formTotalData: false,
/* allow repeated form submission */
/* default: true */
repeatSubmission: true,
/* timeout for success message, milliseconds */
/* default: 5000 */
timeoutSuccessMsg: 5000,
/* handler which is triggered after plugin initialization */
/* at this moment form is ready to work */
/* example: it is good time to get values from database and paste them into form fields */
/* if this function will return false - further form work will be aborted */
/* default: return true; */
afterInitHandler:function() {
return true;
},
/* handler which is triggered after successful validation and before sending form data to server */
/* at this moment form data is validated and ready to be sent to server */
/* example: all values are valid and it is good time to do something with these values */
/* if this function will return false - further form work will be aborted */
/* default: return true; */
beforeSubmitHandler:function() {
return true;
},
/* handler which is triggered after successful result from server and before showing this result to a user */
/* at this moment form is submitted successfuly, but user doesn't get success message yet */
/* example: it is good time for custom success result processing */
/* if this function will return false - further form work will be aborted */
/* default: return true; */
afterSubmitHandler:function() {
return true;
},
/************************************************/
/* end Form settings */
/************************************************/
});
});