Form Rules Tag

Demo

The form used in the form-rules tag example will be the one below: 

                            <form name="subscriptionForm">
                                <fieldset>
                                    <label for="name" >Name</label>
                                    <input name="name" id="name" />
                                    
                                    <label for="surname">Surname</label>
                                    <input name="surname" id="surname" />
                                    
                                    <label for="occupation" >Occupation</label>
                                    <select id="occupation" name="occupation">
                                        <option value="fg" selected="selected">Select occupation</option>           
                                        <option value="worker">Worker</option>
                                        <option value="student">Student</option>
                                        <option value="unemployed">Unemployed</option>            
                                    </select> 
                                    
                                    <label for="company">Company</label>
                                    <input name="company" id="company" />
                                    
                                    <label for="university">University</label>
                                    <input name="university" id="university" />
                                        
                                    <label for="degree">Degree</label>
                                    <input name="degree" id="degree" />
                                    
                                    <label for="previousEmploymentY" >Employed in the past</label>
                                    <input type="radio" name="previousEmployment" id="previousEmploymentY" value="yes"/>
                                    <label for="previousEmploymentN" >No previous employment</label>
                                    <input type="radio" name="previousEmployment" id="previousEmploymentN" value="no"/>
                                    
                                    <label for="pastCompany">Past Company</label>
                                    <input name="pastCompany" id="pastCompany" />       
                                </fieldset>
                            </form>

The previous form contains several fields that should be displayed only when some others have a certain value:

  • Name: text input that has to be displayed always
  • Surname: text input that is always displayed
  • Occupation: select combo that has to be visible always
  • Company: text input only displayed when the occupation is worker
  • University: text input displayed whenever occupation is student
  • Degree: text input when occupation is student
  • No previous employment/Employed in the past: radio buttons only visible if occupation is unemployed
  • Past company: only visible if employed in the past is checked

To achieve the behavior explained above, it has to be configured this way: 

    <jstags-forms:form-rules formName="subscriptionForm" 
        displayAlways="['name', 'surname', 'occupation']">
        
        <jstags-forms:form-rule fieldName="occupation" 
            pairs='{"worker": ["company"], "student": ["university", "degree"], 
            "unemployed": ["previousEmployment"]}'/>
            
        <jstags-forms:form-rule fieldName="previousEmployment" 
            pairs='{"yes": ["pastCompany"]}'/>   
                                                  
    </jstags-forms:form-rules>
And this would be the result:

Subscription form
Note: due to this web being a static one, the JavaScript seen in this example if you have a look at the page source is not exactly the same as the one being generated by jstags. Some adaptations had to be made in order to include the example.