Picture a form with 4 sections. I wanted to allow the users to select which of those 4 sections he wants to fill in (if not all 4 of them) so what I did was:

I wrapped each section into a div with an id from 1 to 4:

Code: Select all

<div id="div-1" class="hidden">Form 1</div>
<div id="div-2" class="hidden">Form 2</div>
<div id="div-3" class="hidden">Form 3</div>
<div id="div-4" class="hidden">Form 4</div>

Created a checkbox linked to those four divs that shows/hides them if checked/unchecked:

Code: Select all

<input type="checkbox" name="group[]" class="show-div" data-target="div-1" value="1">
<input type="checkbox" name="group[]" class="show-div" data-target="div-2" value="2"> 
<input type="checkbox" name="group[]" class="show-div" data-target="div-3" value="3">
<input type="checkbox" name="group[]" class="show-div" data-target="div-4" value="4">  

Handle everything via JS:

Code: Select all

$('input.show-div').on('change', function() {
var source = $(this);
var target = $('#' + source.attr('data-target'));

   if ($('input[data-target='+source.attr('data-target')+']:checked').length) target.show();
   else target.hide();
});

Everything works just as you would imagine, that is until you add required='1' to your forms. It looks like if parts of the hidden forms are required, they will also through in an error requiring you to fill them.

First I thought about wrapping/unwrapping the divs dynamically with the ignore tag but that won't work cause JS can't wrap a div in <cms:ingore></cms:ignore> and unwrap it. Using the eighth node to comment/uncomment the divs is a pain in the **ahem too.

Is there another way around this ?
For the moment I have no choice but to leave all the fields with required='0'.

[trendoman]

maybe manipulate 'required' with js? i'm not a js guy though..

maybe manipulate 'required' with js? i'm not a js guy though..

Well, adding the required with js would look something like:

Code: Select all

if ($('input[data-target='+source.attr('data-target')+']:checked').length){
target.show();
target.find('input').prop('required',true);
} else {
target.hide();
target.find('input').removeAttr('required');​​​​​
}

Will try this soon. Thought about adding the attribute with JS before but I couldn't get it to work cause instead of using true and remove I used numeric (1/0) to handle it but that only works inside couch. Will post soon if this works.

[trendoman]

Maybe not use cms:input then? just normal html input with required attribute? And back this up with a duplicated cms:input type='hidden' with the same name.

Maybe not use cms:input then? just normal html input with required attribute? And back this up with a duplicated cms:input type='hidden' with the same name.

So the script that I wrote doesn't work sadly.

It's already a huge form (it's for an insurance policy so it requires loads of details) so duplicating will not only be a pain to create, imagine how it would be to need to change something in it... I hope that KK or someone needed something like this before and had an idea...

This thread may have what you're looking for.
viewtopic.php?f=4&t=9118

This thread may have what you're looking for.
viewtopic.php?f=4&t=9118

Hey Tim, thank you for your answer.
While this works and it's easy to implement, it's easy only if you have a small amount of hidden fields that you want required.

At the moment, I have a total of 6 hidden fields that show upon interaction with a checkbox, each with a number of 3 to 7 fields that will be required.

This would mean I have to write 6 custom validations, n hidden input fields to handle the custom validation and a lot of custom checks for each input field to through an error...

I think I found a way of doing this fast and easy. I haven't tested it yet but I will soon and will come with feedback.

I can simply save the fields of each of the 6 sections as external html files [section1.html, section2.html and so on] and load them upon interaction with js:

Code: Select all

$(function() {
  $("#div-1").load("section1.html");
});

..and to unload them I could simply use js to leave the div empty by replacing the html.

Code: Select all

$("#div-1").html("");

Will come back with the full code.

[KK]

@Alin,

At the moment, I have a total of 6 hidden fields that show upon interaction with a checkbox, each with a number of 3 to 7 fields that will be required.

This would mean I have to write 6 custom validations, n hidden input fields to handle the custom validation and a lot of custom checks for each input field to through an error...

The custom validator in the example Tim mentioned serves only to give us a toe-hold to execute some PHP while Couch validates the form.

I think just the single validator would be sufficient and we can put all the logic required to check if the fields are empty or not in there.

If you could post the actual form in its entirety here maybe we can find an easier way out.

That said, looking at the sample code in your first post of this thread, I think there could be way of doing this without the custom validator -

From the looks of it, you have 4 discrete groups of fields. So I suggest you actually create them as four separate forms (i.e. each group wrapped in its own <cms:form></cms:form>.

Although the forms are four, create only a single submit button.
Now using JS change the target of the submit button to whatever form is visible.

This way only one of the four forms will get submitted and Couch will validate only the fields belonging to that particular form (i.e. ignore the other forms).

What do say? Wouldn't this work?

If you could post the actual form in its entirety here maybe we can find an easier way out.

@KK ,
Having multiple forms and retargeting the submit button won't quite work due to the fact that we have some fields that are always visible [the name/email and so on] and for the other 6, the user can select which forms he wants to fill in, this means he ca select 1, 2 or all 6 of them.

I have cleaned my code as much as I could to make it readable and easier.

Here it is:

Code: Select all

<!-- EXTENDED FORM -->
<cms:form id="contactForm" action="" method="POST" anchor="0">
<!--------------------------------------------->
  <!-- Handle Success/Error -->
  <cms:if k_error>
    <div class="contact_errorbox">All the red fields are required!</div>
  </cms:if>
  <cms:if k_success>
    <cms:set_flash name='submit_success' value='1' />
    <cms:redirect k_page_link />
  </cms:if>
  <!-- /Handle Success/Error -->
<!--------------------------------------------->

  <div class="extended_form">
     <!--THIS IS ALWAYS VISIBLE AND REQUIRED-->
    <div class="side center_everything">
      <h3>Date identificare</h3>
      <cms:input name="section1_1" type="text" placeholder="Name" required='1' class="<cms:if k_error_section1_1>error</cms:if>" />

      <cms:input name="section1_2" type="text" placeholder="Phone" required='1' class="<cms:if k_error_section1_2>error</cms:if>" />

      <cms:input name="section1_3" type="text" placeholder="Email" required='1' class="<cms:if k_error_section1_2>error</cms:if>" />

      <cms:input name="section1_5" type="text" placeholder="Address" required='1' class="<cms:if k_error_section1_5>error</cms:if>" />
    </div>
     <!--/THIS IS ALWAYS VISIBLE AND REQUIRED-->
    
   <div class="side">
<!--------------------------------------------->
    <div id="div-1">
    <!--SECTION-->

        <h3>SECTION 1:</h3><!--HAS 8 INPUT FIELDS-->
        <cms:input name="section3_1" type="text" placeholder="INPUT" required='1' class="<cms:if k_error_section3_1>error</cms:if>" />
        
    <!--/SECTION-->
    </div>
<!--------------------------------------------->
    <div id="div-2">
    <!--SECTION-->
    
        <h3>SECTION 2:</h3><!--HAS 3 INPUT FIELDS-->
        <cms:input name="section4_1" type="text" placeholder="INPUT" required='1' class="<cms:if k_error_section4_1>error</cms:if>" />
                
    <!--/SECTION-->
    </div>
<!--------------------------------------------->
    <div id="div-3">
    <!--SECTION-->
    
        <h3>SECTION 3:</h3><!--HAS 2 INPUT FIELDS-->
        <cms:input name="section5_1" type="text" placeholder="INPUT" required='1' class="<cms:if k_error_section5_1>error</cms:if>" />
        
    <!--/SECTION-->
    </div>
<!--------------------------------------------->

    </div>
    <div class="side float_right">
    
<!--------------------------------------------->
    <div id="div-4">
    <!--SECTION-->
    
        <h3>SECTION 4:</h3><!--HAS 3 INPUT FIELDS-->
        <cms:input name="section6_1" type="text" placeholder="INPUT" required='1' class="<cms:if k_error_section6_1>error</cms:if>" />
        
    <!--/SECTION-->
    </div>
<!--------------------------------------------->
    <div id="div-5">
    <!--SECTION-->
    
        <h3>SECTION 5:</h3><!--HAS 2 INPUT FIELDS-->
        <cms:input name="section7_1" type="text" placeholder="INPUT" required='1' class="<cms:if k_error_section7_1>error</cms:if>" />
        
    <!--/SECTION-->
    </div>
<!--------------------------------------------->
    <div id="div-6">
    <!--SECTION-->
    
        <h3>SECTION 6:</h3><!--HAS 3 INPUT FIELDS-->
        <cms:input name="section8_1" type="text" placeholder="INPUT" required='1' class="<cms:if k_error_section8_1>error</cms:if>" />
        
    <!--/SECTION-->
    </div>
<!--------------------------------------------->

      <div class="clear"></div>
      <button type="submit" class="send">Send &nbsp;&raquo;</button>

      <div class="info">
        <cms:show form_info />
      </div>

    </div>
  </div>
<!--------------------------------------------->
    <cms:if k_success>
      <cms:php>
      <!--PHPMAILER SCRIPT-->
      </cms:php>
    </cms:if>
<!--------------------------------------------->
    
</cms:form>
<!--EXTENDED FORM-->

Thank you!!!