Form-Field-Dependency

Simple Form Field Dependency. Conditional Form Fields on the fly.

Download .zip Download .tar.gz View on GitHub

Include jQuery

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Include Form-Field-Dependency

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/EmranAhmed/Form-Field-Dependency@master/dependency.js"></script>

Create your form components

<div class="form-group">
    <label for="InputEmail">Email address:</label>
    <input type="text" class="form-control" id="InputEmail" placeholder="Email">
</div>

Activate plugin

jQuery(function ($) {
        $("[data-dependency]").dependsOn()
});

Add a simple css

[data-dependency]:not(.dependency-show) {
    display : none;
}

Options

  1. attribute write rules on field attribute. You can write your own html attribute name where you define your rules for each field. Default is data-dependency

Available Dependency types

empty blank

Show dependency field if dependsOn field value is empty.

empty, blank type does not require any others attributes.

On attribute
data-dependency="[{'#DependsOnSelector' : {'type':'empty'}}]"

DependsOnSelector should be a input, checkbox, radio or select box

Example Output:
Example Code:
<div class="form-group">
    <label for="exampleInput1">Text Box</label>
    <input type="email" name="checkEmpty" class="form-control" id="exampleInput1" placeholder="">
</div>

<div class="form-group" data-dependency="[{'input[name=checkEmpty]':{'type':'empty'}}]">
    <label for="exampleInput2">This will hide if you write something on Text Box</label>
    <input type="email" class="form-control" id="exampleInput2" placeholder="">
</div>

!empty notEmpty not-empty notempty

Show dependency field if DependsOn field value is not empty.

There is many alias of not empty type: !empty, notEmpty.

!empty type does not require any others attributes.

On attribute
data-dependency="[{'#DependsOnSelector' : {'type':'empty'}}]"

DependsOnSelector should be an input, checkbox, radio or select box

Example Output:
Example Code:
<div class="form-group">
    <label for="exampleInput1">Text Box</label>
    <input type="email" name="checkNotEmpty" class="form-control" id="exampleInput1" placeholder="">
</div>

<div class="form-group" data-dependency="[{'input[name=checkNotEmpty]':{'type':'!empty'}}]">
    <label for="exampleInput2">This will show if you write something on Text Box</label>
    <input type="email" class="form-control" id="exampleInput2" placeholder="">
</div>

equal = == ===

Show dependency field if dependsOn field value is equal to given value.

There is many alias of equal type: equal, ==.

Define value in array or in string.

Checking type strict true to check strictly equal or just match anyone in array.

Default strict value is false

Note: strict value true will effective if you use it on multiple select or checkbox.

Code: on attribute. 
data-dependency="[{'#DependsOnField' : {'type':'equal', 'value':'lorem'}}]"
data-dependency="[{'#DependsOnField' : {'type':'equal', 'value':['lorem', 'ipsum']}}]"
data-dependency="[{'#DependsOnField' : {'type':'equal', 'value':['lorem', 'ipsum'], 'strict':true}}]"
Example 1:
Example 2 with checkbox:

Check system 2 or system 3

Example 2 with checkbox strict true

Check system 2 and system 3

Example Code:
<div class="form-group">
        <label for="exampleInput5">A box will show if you write "lorem" or "ipsum".</label>
        <input type="email" name="" class="form-control" id="exampleInput5" placeholder="">
    </div>

    <div class="form-group"
         data-dependency="[{'#exampleInput5':{'type':'equal', 'value':['lorem','ipsum']}}]">
        <label for="exampleInput6">Hidden Field</label>
        <input type="email" class="form-control" id="exampleInput6" placeholder="">
    </div>

<h5>Example 2 with checkbox:</h5>
<p>Check system 2 or system 3</p>

<div class="form-group">
    <label class="checkbox-inline">
        <input type="checkbox" class="system-checkboxes" id="inlineCheckboxs1" value="option1"> System 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" class="system-checkboxes" id="inlineCheckboxs2" value="option2"> System 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" class="system-checkboxes" id="inlineCheckboxs3" value="option3"> System 3
    </label>
</div>

<div class="form-group"
     data-dependency="[{'input.system-checkboxes':{'type':'equal', 'value':['option2','option3']}}]">
    <label for="exampleInput7">Shown if system 2 or system 3 checked.</label>
    <input type="email" class="form-control" id="exampleInput7" placeholder="">
</div>

<h5>Example 2 with checkbox <code>strict</code> <code>true</code></h5>
<p>Check system 2 and system 3</p>

<div class="form-group">
    <label class="checkbox-inline">
        <input type="checkbox" class="system2-checkboxes" id="inlineCheckboxs4" value="option1"> System 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" class="system2-checkboxes" id="inlineCheckboxs5" value="option2"> System 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" class="system2-checkboxes" id="inlineCheckboxs6" value="option3"> System 3
    </label>
</div>

<div class="form-group"
     data-dependency="[{'input.system2-checkboxes':{'type':'equal', 'value':['option2','option3'], 'strict':true}}]">
    <label for="exampleInput7">Shown if system 2 and system 3 checked</label>
    <input type="email" class="form-control" id="exampleInput8" placeholder="">
</div>

!equal != notEqual not-equal notequal

Show dependency field if dependsOn field value is not equal to given value.

There is many alias of not equal type: !equal,!=,notEqual,not-equal.

Define value in array or in string.

Checking type strict true to check strictly not equal or just not match anyone in array.

Default strict value is false

Note: strict value true will effective if you use it on multiple select or checkbox.

Code: on attribute. 
data-dependency="[{'#DependsOnField' : {'type':'!equal', 'value':'lorem'}}]"
data-dependency="[{'#DependsOnField' : {'type':'!equal', 'value':['lorem', 'ipsum']}}]"
data-dependency="[{'#DependsOnField' : {'type':'!equal', 'value':['lorem', 'ipsum'], 'strict':true}}]"
Example 1:
Example 2 with checkbox:

Check system 2 or system 3

Example 2 with checkbox strict true

Check system 2 and system 3

Example Code:
<div class="form-group">
    <label for="exampleInput5">A box will hide if you write "lorem" or "ipsum".</label>
    <input type="email" name="" class="form-control" id="exampleInput9" placeholder="">
</div>

<div class="form-group"
     data-dependency="[{'#exampleInput9':{'type':'!equal', 'value':['lorem','ipsum']}}]">
    <label for="exampleInput6">Field</label>
    <input type="email" class="form-control" id="exampleInput10" placeholder="">
</div>

<h5>Example 2 with checkbox:</h5>

<p>Check system 2 or system 3</p>

<div class="form-group">
    <label class="checkbox-inline">
        <input type="checkbox" class="system3-checkboxes" value="option1"> System 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" class="system3-checkboxes"  value="option2"> System 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" class="system3-checkboxes"  value="option3"> System 3
    </label>
</div>

<div class="form-group"
     data-dependency="[{'input.system3-checkboxes':{'type':'!equal', 'value':['option2','option3']}}]">
    <label for="exampleInput11">Hide if system 2 or system 3 checked.</label>
    <input type="email" class="form-control" id="exampleInput11" placeholder="">
</div>

<h5>Example 2 with checkbox <code>strict</code> <code>true</code></h5>

<p>Check system 2 and system 3</p>

<div class="form-group">
    <label class="checkbox-inline">
        <input type="checkbox" class="system4-checkboxes"  value="option1"> System 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" class="system4-checkboxes" value="option2"> System 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" class="system4-checkboxes" value="option3"> System 3
    </label>
</div>

<div class="form-group" data-dependency="[{'input.system4-checkboxes':{'type':'!equal', 'value':['option2','option3'], 'strict':true}}]">
    <label for="exampleInput12">Hide if system 2 and system 3 checked</label>
    <input type="email" class="form-control" id="exampleInput12" placeholder="">
</div>

regexp exp expression match

Show dependency field if dependsOn field value is match to given pattern.

There is many alias of regexp type: regexp,exp,expression,match.

Define pattern in string.

Define modifier in string. (Optional)

Default modifier value is gi

Code: on attribute. 
data-dependency="[{'#DependsOnField' : {'type':'regexp', 'pattern':'[a-z]+@[a-z]+.[a-z]+'}}]"
data-dependency="[{'#DependsOnField' : {'type':'regexp', 'pattern':'[a-z]+@[a-z]+.[a-z]+', 'modifier':'gi'}}]"
Example:
<div class="form-group">
    <label for="exampleInputXX">A box will show email address is valid.</label>
    <input type="email" name="" class="form-control" id="exampleInputXX" placeholder="">
</div>

<div class="form-group"
     data-dependency="[{'#exampleInputXX':{'type':'regexp', 'pattern':'[a-z]+@[a-z]+.[a-z]+'}}]">
    <label for="exampleInputYY">Field</label>
    <input type="email" class="form-control" id="exampleInputYY" placeholder="Yes, email is valid">
</div>