Hi!

I managed to show and hide fields after reading documentation http://www.rsjoomla.com/customer-support/documentations/34-custom-scripting/93-show-or-hide-fields.html. But I have a problem, if fields are mandatory you are forced to answer them even if they are hidden. How to solve this, to just have answer shown fields?

Thanks!

Matt

did you solve this? as I would like to know too

As would I

Hi!

I recived great support from Alex (RSJoomla) by adding some javascript to my form.

To the submit button - Additional Attributes - add this code in the attached file


In my formIs the area in the form you like to hide, a row or table.Are in my example the name of the fields or components.

I am not an expert, so I think this is the best explanation I can give. And I hope it is correct I did some copy and paste.


Matt

Hello

I would like to download the file Code_not_shown_fields.txt but the link is dead.

Any ideas?

Thanks

Hello,

After implementing the show/hide field script, let's assume that you have a text-box field that has an id "hide" and a field name "field1". In order to make this field required you will have to paste this script in the Form Layout tab:

Where 'component150' is the id of the form component.

Also you will have to place this script in the Additional Attributes box of the Submit Button:

So that the form will not submit if the field is shown and empty.

Regards!

"the id of the form component"



what does this mean?



Thanks

Hello,

The respective id can be found in the page source of your form (from the front end). You will see that each field from your form will have a line like this one:

You will have to take the "component150" ids for the respective fields which you want to make dynamically required and use them in the script.

Regards!

I am trying to achieve a similar thing using the example that you've kindly provided.

I have 12 text fields, each is required and has email validation on.

The first 5 fields are loaded on the form by default using a showHide type function which is working fine however, I have tried to implement your example so that:

If the user wants to add another (the 6th) email address or any others, he or she can click '+' button that unhides the next text box and another button to unhide the next (7th text field) and so on.

My problem is that I only wish for the fields to be validated - or rather, - be required if the li id that holds it is not hidden.

I can't get this to work. I am calling the function using onsubmit as you suggested, linking to the component id ('component602') in the case of email 6 as a test but it still fails.

Please can you help?

I will post my layout/script and so on so you can see as soon as I've submitted this.

Many thanks for this wonderful component!!!

Gez

<fieldset class="formFieldset">
<legend>{global:formtitle}</legend>
{error}
<!-- Do not remove this ID, it is used to identify the page so that the pagination script can work correctly -->
<ol class="formContainer" id="rsform_20_page_0">

<li id="stuemail1">
<div class="formCaption">{stu_email1:caption}</div>
<div class="formBody">{stu_email1:body}<span class="formClr">{stu_email1:validation}</span></div>
<div class="formDescription">{stu_email1:description}</div>
</li>
<li id="stuemail2">
<div class="formCaption">{stu_email2:caption}</div>
<div class="formBody">{stu_email2:body}<span class="formClr">{stu_email2:validation}</span></div>
<div class="formDescription">{stu_email2:description}</div>
</li>
<li id="stuemail3">
<div class="formCaption">{stu_email3:caption}</div>
<div class="formBody">{stu_email3:body}<span class="formClr">{stu_email3:validation}</span></div>
<div class="formDescription">{stu_email3:description}</div>
</li>
<li id="stuemail4">
<div class="formCaption">{stu_email4:caption}</div>
<div class="formBody">{stu_email4:body}<span class="formClr">{stu_email4:validation}</span></div>
<div class="formDescription">{stu_email4:description}</div>
</li>
<li id="stuemail5">
<div class="formCaption">{stu_email5:caption}</div>
<div class="formBody">{stu_email5:body}<span class="formClr">{stu_email5:validation}</span></div>
<div class="formDescription">{stu_email5:description}</div>
</li>
<li id="buttonaddemail6">
<div class="formCaption">{addEmail6:caption}</div>
<div class="formBody">{addEmail6:body}<span class="formClr">{addEmail6:validation}</span></div>
<div class="formDescription">{addEmail6:description}</div>
</li>
<li id="stuemail6">
<div class="formCaption">{stu_email6:caption}</div>
<div class="formBody">{stu_email6:body}<span class="formClr">{stu_email6:validation}</span></div>
<div class="formDescription">{stu_email6:description}</div>
</li>
<li id="buttonaddemail7">
<div class="formCaption">{addEmail7:caption}</div>
<div class="formBody">{addEmail7:body}<span class="formClr">{addEmail7:validation}</span></div>
<div class="formDescription">{addEmail7:description}</div>
</li>
<li id="stuemail7">
<div class="formCaption">{stu_email7:caption}</div>
<div class="formBody">{stu_email7:body}<span class="formClr">{stu_email7:validation}</span></div>
<div class="formDescription">{stu_email7:description}</div>
</li>
<li id="buttonaddemail8">
<div class="formCaption">{addEmail8:caption}</div>
<div class="formBody">{addEmail8:body}<span class="formClr">{addEmail8:validation}</span></div>
<div class="formDescription">{addEmail8:description}</div>
</li>
<li id="stuemail8">
<div class="formCaption">{stu_email8:caption}</div>
<div class="formBody">{stu_email8:body}<span class="formClr">{stu_email8:validation}</span></div>
<div class="formDescription">{stu_email8:description}</div>
</li>
<li id="buttonaddemail9">
<div class="formCaption">{addEmail9:caption}</div>
<div class="formBody">{addEmail9:body}<span class="formClr">{addEmail9:validation}</span></div>
<div class="formDescription">{addEmail9:description}</div>
</li>
<li id="stuemail9">
<div class="formCaption">{stu_email9:caption}</div>
<div class="formBody">{stu_email9:body}<span class="formClr">{stu_email9:validation}</span></div>
<div class="formDescription">{stu_email9:description}</div>
</li>
<li id="buttonaddemail10">
<div class="formCaption">{addEmail10:caption}</div>
<div class="formBody">{addEmail10:body}<span class="formClr">{addEmail10:validation}</span></div>
<div class="formDescription">{addEmail10:description}</div>
</li>
<li id="stuemail10">
<div class="formCaption">{stu_email10:caption}</div>
<div class="formBody">{stu_email10:body}<span class="formClr">{stu_email10:validation}</span></div>
<div class="formDescription">{stu_email10:description}</div>
</li>
<li id="buttonaddemail11">
<div class="formCaption">{addEmail11:caption}</div>
<div class="formBody">{addEmail11:body}<span class="formClr">{addEmail11:validation}</span></div>
<div class="formDescription">{addEmail11:description}</div>
</li>
<li id="stuemail11">
<div class="formCaption">{stu_email11:caption}</div>
<div class="formBody">{stu_email11:body}<span class="formClr">{stu_email11:validation}</span></div>
<div class="formDescription">{stu_email11:description}</div>
</li>
<li id="buttonaddemail12">
<div class="formCaption">{addEmail12:caption}</div>
<div class="formBody">{addEmail12:body}<span class="formClr">{addEmail12:validation}</span></div>
<div class="formDescription">{addEmail12:description}</div>
</li>
<li id="stuemail12">
<div class="formCaption">{stu_email12:caption}</div>
<div class="formBody">{stu_email12:body}<span class="formClr">{stu_email12:validation}</span></div>
<div class="formDescription">{stu_email12:description}</div>
</li>
<li id="projname">
<div class="formCaption">{proj_name:caption}</div>
<div class="formBody">{proj_name:body}<span class="formClr">{proj_name:validation}</span></div>
<div class="formDescription">{proj_name:description}</div>
</li>
<li id="authorityname">
<div class="formCaption">{authority_name:caption}</div>
<div class="formBody">{authority_name:body}<span class="formClr">{authority_name:validation}</span></div>
<div class="formDescription">{authority_name:description}</div>
</li>
<li id="schoolname">
<div class="formCaption">{school_name:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{school_name:body}<span class="formClr">{school_name:validation}</span></div>
<div class="formDescription">{school_name:description}</div>
</li>
<li id="designatedschooltopic">
<div class="formCaption">{designated_school_topic:caption}</div>
<div class="formBody">{designated_school_topic:body}<span class="formClr">{designated_school_topic:validation}</span></div>
<div class="formDescription">{designated_school_topic:description}</div>
</li>
<li id="currentdate">
<div class="formCaption">{current_date:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{current_date:body}<span class="formClr">{current_date:validation}</span></div>
<div class="formDescription">{current_date:description}</div>
</li>
<li id="entryclose">
<div class="formCaption">{entry_close:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{entry_close:body}<span class="formClr">{entry_close:validation}</span></div>
<div class="formDescription">{entry_close:description}</div>
</li>
<li id="selecttheme">
<div class="formCaption">{select_theme:caption}</div>
<div class="formBody">{select_theme:body}<span class="formClr">{select_theme:validation}</span></div>
<div class="formDescription">{select_theme:description}</div>
</li>
<li class="rsform-block rsform-block-submitauthority">
<div class="formCaption">{submit_authority:caption}</div>
<div class="formBody">{submit_authority:body}<span class="formClr">{submit_authority:validation}</span></div>
<div class="formDescription">{submit_authority:description}</div>
</li>
<li id="dbthemechoice">
<div class="formCaption">{db_theme_choice:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_theme_choice:body}<span class="formClr">{db_theme_choice:validation}</span></div>
<div class="formDescription">{db_theme_choice:description}</div>
</li>
<li id="dbreqpupils">
<div class="formCaption">{db_req_pupils:caption}</div>
<div class="formBody">{db_req_pupils:body}<span class="formClr">{db_req_pupils:validation}</span></div>
<div class="formDescription">{db_req_pupils:description}</div>
</li>
<li id="dbreqlyrics">
<div class="formCaption">{db_req_lyrics:caption}</div>
<div class="formBody">{db_req_lyrics:body}<span class="formClr">{db_req_lyrics:validation}</span></div>
<div class="formDescription">{db_req_lyrics:description}</div>
</li>
<li id="dbwsdayscount">
<div class="formCaption">{db_ws_days_count:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_ws_days_count:body}<span class="formClr">{db_ws_days_count:validation}</span></div>
<div class="formDescription">{db_ws_days_count:description}</div>
</li>
<li id="dbwsdaterangestart">
<div class="formCaption">{db_ws_daterange_start:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_ws_daterange_start:body}<span class="formClr">{db_ws_daterange_start:validation}</span></div>
<div class="formDescription">{db_ws_daterange_start:description}</div>
</li>
<li id="dbwsdaterangeend">
<div class="formCaption">{db_ws_daterange_end:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_ws_daterange_end:body}<span class="formClr">{db_ws_daterange_end:validation}</span></div>
<div class="formDescription">{db_ws_daterange_end:description}</div>
</li>
<li id="dbrehearsaldayscount">
<div class="formCaption">{db_rehearsal_days_count:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_rehearsal_days_count:body}<span class="formClr">{db_rehearsal_days_count:validation}</span></div>
<div class="formDescription">{db_rehearsal_days_count:description}</div>
</li>
<li id="dbrehearsaldaterangestart">
<div class="formCaption">{db_rehearsal_daterange_start:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_rehearsal_daterange_start:body}<span class="formClr">{db_rehearsal_daterange_start:validation}</span></div>
<div class="formDescription">{db_rehearsal_daterange_start:description}</div>
</li>
<li id="dbrehearsaldaterangeend">
<div class="formCaption">{db_rehearsal_daterange_end:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_rehearsal_daterange_end:body}<span class="formClr">{db_rehearsal_daterange_end:validation}</span></div>
<div class="formDescription">{db_rehearsal_daterange_end:description}</div>
</li>
<li id="dbrehearsalhoursvenue">
<div class="formCaption">{db_rehearsal_hours_venue:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_rehearsal_hours_venue:body}<span class="formClr">{db_rehearsal_hours_venue:validation}</span></div>
<div class="formDescription">{db_rehearsal_hours_venue:description}</div>
</li>
<li id="dbfinaldate">
<div class="formCaption">{db_final_date:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_final_date:body}<span class="formClr">{db_final_date:validation}</span></div>
<div class="formDescription">{db_final_date:description}</div>
</li>
<li id="dbprojectid">
<div class="formCaption">{db_project_id:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_project_id:body}<span class="formClr">{db_project_id:validation}</span></div>
<div class="formDescription">{db_project_id:description}</div>
</li>
<li id="dbauthorityid">
<div class="formCaption">{db_authority_id:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_authority_id:body}<span class="formClr">{db_authority_id:validation}</span></div>
<div class="formDescription">{db_authority_id:description}</div>
</li>
<li id="dbschoolid">
<div class="formCaption">{db_school_id:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_school_id:body}<span class="formClr">{db_school_id:validation}</span></div>
<div class="formDescription">{db_school_id:description}</div>
</li>
<li id="dbschooltopicid">
<div class="formCaption">{db_school_topic_id:caption}<strong class="formRequired">(*Required)</strong></div>
<div class="formBody">{db_school_topic_id:body}<span class="formClr">{db_school_topic_id:validation}</span></div>
<div class="formDescription">{db_school_topic_id:description}</div>
</li>
<li id="studauth">
<div class="formCaption">{Student Authorisation Number:caption}</div>
<div class="formBody">{Student Authorisation Number:body}<span class="formClr">{Student Authorisation Number:validation}</span></div>
<div class="formDescription">{Student Authorisation Number:description}</div>
</li>
<li id="staffid">
<div class="formCaption">{staff_id:caption}</div>
<div class="formBody">{staff_id:body}<span class="formClr">{staff_id:validation}</span></div>
<div class="formDescription">{staff_id:description}</div>
</li>
</ol>
</fieldset>
<script type="text/javascript">
hideParams();
hideThemeChoice();
</script>

Here is the script - I am calling this function by adding onclick="switchValidateHidden();" - I have also tried placing onsubmit="switchValidateHidden();" in the additional attibutes of the form


<script type="text/javascript">
function switchValidateHidden()
{
if(document.getElementById('stuemail6').style.display=="" && document.getElementById('stu_email6').value=="")
{
document.getElementById('component602').className = 'formError';
return false;
}
else
{
document.getElementById('component602').className = 'formNoError';
return true;
}
}
</script>

Hi there Bogdanc,

I would really appreciate a reply on this as I have followed your instructions exactly to the best of my knowledge but can't get it to work.

I just want the email fields that are hidden not to be required.

Thanks,

Gez