Want to skip the long intro? We have you covered. Select what you want from below
Required Libraries
Parsely Conditions requires the following plugins to work.
Installation
The conditional plugin requires a few things to get started.
First ensure you have the latest version of jQuery linked in the header of your page. If you want to support earlier versions of IE use jQuery 1.9 or lower, otherwise jQuery 2 should do the trick. If you really want to go old school Parsely Conditions has been tested with jQuery 1.7.1.
Add the Parsely JS library after the jQuery link. As of this writing Parsely Conditions has been tested with Parsely 1.1.16.
Next add the latest Parsely Conditions plugin to the top of your page, after the jQuery and Parsely links.
Form Setup
If you're ever used Parsely on an existing form this part will be very familiar to you. Add Parsely validation rules to your form like you normally would. Note that you should add validation to all fields even those you intend to enable conditionaly, the conditional plugin will toggle any rules you add. If you need help adding Parsely validation rules visit the official Parsely docs.
The documentation on this page will use the following form structure as reference. Let's assume you have a form that includes a select and an input field. Selecting "Yes" from the select should make the input field required. The conditional script will toggle the rules you set on and off. See the code sample below that illustrates this example.
<form method="post" id="customForm" data-validate="parsley"
data-show-errors="true">
<select id="formTrigger" name="formTrigger"
data-notblank="true" data-required="true" data-trigger="change">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<div id="maskDiv">
<input id="toggledField" name="toggledField" type="text"
data-trigger="change" data-required="true"/>
</div>
<input type="button" value="Submit"
onclick="javascript:submitForm();" />
</form>Initializing the Plugin
To begin using the plugin you'll need to configure a few options first. Take a look at the code block below.
var fValidate = $.parselyConditions({
csstoggle: 'parselyTaDa',
formname: 'customForm',
validationfields: [
{
fid: 'formTrigger',
ftype: 'select',
fvalue: 'yes',
faffected: 'toggledField',
fhide: 'maskDiv'
}
]
});Let's review the code line by line. First a copy of the plugin is saved to a variable "fvalidate". Next we define a few global options for the plugin.
csstoggle
Parsely conditional lets you hide or show parts of your form via CSS. It does this by adding and removing a class on a DOM element. (More on showing and hiding dom elements shortly.) By default Parsely Conditional adds a class called "parselyTaDa" to the DOM element. Don't like parselyTaDa? No problem just sepcify a class that's more to your liking as demonstrated above.
formname
Parsely Conditional uses an id on the form declaration to apply it's conditions. By default the plugin assumes the form has an id of "#parsely-form". However you can override the default form id using this plugin option.
That's it for global settings, next you'll need to specify the rules for each input that triggers a condition. Using the example above "formTrigger" makes "toggleField" a required form field. Changing "formTrigger" to "Yes" will also make "toggleField" appear in the form.
Initializing the Form Fields
You need to specify a few options for each input that will trigger a condition. In the case above I've added the input with the id of "formTrigger" to the plugin. Let's look at how that's done.
validationfields: [
{
fid: 'formTrigger',
ftype: 'select',
fvalue: 'yes',
faffected: 'toggledField',
fhide: 'maskDiv'
}
]fid
Accepted input: string
The id of the form input that triggers a condition. When specifying the id omit the #.
ftype
Accepted input: one of the following strings - select, checkbox, checklist or radio
Identify the type of field that is triggering the condition. Parsely Conditional can be applied to select menus, radio buttons, checkbox or checlists (a related group of check boxes ie: click all that apply). When specifying the id omit the #.
fvalue
Accepted input: string or array of strings
Specify the value which the plugin should match to enable conditions on another field. This can be a single value such as "yes" or if multiple possible answers can trigger a condition an array of potential answers can be passed. Below is an example of a single value and an array of potential answers.
// Single value
fvalue:"apples",
// Multiple values
fvalue:['apples','oranges','other'],faffected
Accepted input: string, array of strings or false
A form input or inputs who's validation is toggled on or off. This can be a single form input, multiple form inputs or set to false. Multiple form inputs is useful if you want to require a section of your form conditionally. For example if someone checks a box that indicates they have a different shipping address.
False can be used if you don't want to trigger validation on an extra field but you want to display an alert message to the user. Setting this to false and adding a div id to fhide allows you to show a message conditionally within your form. For example if someone clicks express shipping you could display a message that tells them how much more express shipping would cost. When specifying the id omit the #.
fhide
Accepted input: string, array of strings or false
Adding multiple form fields
To add multiple form fields to the plugin, simply seperate each input declaration with a comma. In the example below each grouping within the curly brackets represents a form input to which conditional logic has been applied.
validationfields: [
{
fid: 'formTrigger',
ftype: 'select',
fvalue: 'yes',
faffected: 'toggledField',
fhide: 'maskDiv'
},
{
fid: 'formTrigger2',
ftype: 'checklist',
fvalue: ['blue','other'],
faffected: ['toggledField2','toggleField3'],
fhide: ['maskDiv2','maskDiv3']
},
{
fid: 'formTrigger3',
ftype: 'checkbox',
fvalue: 'other',
faffected: false,
fhide: 'maskDiv4'
}
]Add Show / Hide Listeners
To enable the showing and hiding of DOM elements you must call the toggleFields() method. This adds an event listener to each toggle field which triggers the showing and hiding. The example below uses jQuery's ready event and calls the toggleFields method when the DOM tree is loaded.
$(function() {
fValidate.toggleFields();
});Submitting and Validating the Form
To validate the form you'll need to call the method "checkFields()". Using the example on this page here's how to validate your form.
fValidate.checkFields();This method returns true if the form validates or false if the validation fails. Providing a boolean value allows you to customize what happens before or after a submission occurs and respond accordingly.
Here is an example of a custom form submission function.
function submitForm(){
if(fValidate.checkFields()){
alert('Form successful!');
// your custom js form submission code here!
} else {
alert('Form failed');
// display an error message to the user...
}
}Demos
Simple Example Without Whow and Hide
This simple example demonstrates conditional logic being applied and removed on a field. View this demo.
Simple Example With Show and Hide
This simple example demonstrates conditional logic being applied and removed on a field it also toggles the visibility of the second field. View this demo.
Multiple Field Example
This example demonstrates conditional logic being applied to multiple fields from a single trigger. It also toggles the visibility on the same group of fields. View this demo.
Dialog Only
This examples demonstrates how you can toggle visibility on a DOM element using a trigger field. It also demonstrates how to bypass toggling validation logic. View this demo.
Multiple Condition on the Same Input
This examples demonstrates how to combine multiple options together on the same input. It also highlights how a checklist is applied. View this demo.
Nested Conditional Logic
This example shows how conditional triggers can be nested one within another. It also demonstrates how a single trigger can toggle multiple DOM elements on and off. View this demo.