Chronoform dynamic field with validation [Demo Code]

Easy way to add dynamic field validation to chronoform 

<script type="text/javascript">
 function addfieldcat() {
 var comcat= jq("select[name=ComCategory]").val();
if(comcat=="Animation") {
jq('.comcat_ani').toggle({display: 'block'});
 jq('.comcat_arc').css({display: 'none'});
 jq('.comcat_man').css({display: 'none'});
}
 if(comcat=="Manufacturing") {
jq('.comcat_man').toggle({display: 'block'});
jq('.comcat_ani').css({display: 'none'});
jq('.comcat_arc').css({display: 'none'});
}
 if(comcat=="Architecture") {
 jq('.comcat_arc').toggle({display: 'block'});
 jq('.comcat_ani').css({display: 'none'});
 jq('.comcat_man').css({display: 'none'});
 }
if(comcat=="Please Select")
{
jq('.comcat_ani').css({display: 'none'});
jq('.comcat_man').css({display: 'none'});
 jq('.comcat_arc').css({display: 'none'});
 }
 }
 </script>

<div style="background:#fff;color:#000; padding:100px;">
<div style="" id="autoID-ec36e458c4ffaca305dc9310e8acf92c_container_div" class="ccms_form_element cfdiv_select"><label>Competition category : </label><select  name="ComCategory" container_id="0" title="" class="validate['required']" onchange="addfieldcat();" size="1" >
<option value="">Please Select</option>
<option value="Animation">Animation</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Architecture">Architecture</option>
</select>
<div class="clear"></div><div id="error-message-input_select_39"></div></div>



<div class="comcat_ani" style="display:none;">
<div style="" id="autoID-5c2e6f2a9946f83772d6d63d9a774efd_container_div" class="ccms_form_element cfdiv_text"><label>Youtube URL 1 :</label><input type="text" name="YoutubeURL1" value="" container_id="0" title="" class="step2" size="30" maxlength="150">
<div class="clear"></div><div id="error-message-YoutubeURL"></div></div>
</div>

<div class="comcat_man" style="display:none;">
<div style="" id="autoID-5c2e6f2a9946f83772d6d63d9a774efd_container_div" class="ccms_form_element cfdiv_text"><label>Youtube URL 2 :</label><input type="text" name="YoutubeURL2" value="" container_id="0" title="" class="step2" size="30" maxlength="150">
<div class="clear"></div><div id="error-message-YoutubeURL"></div></div>
</div>

<div class="comcat_arc" style="display:none;">
<div style="" id="autoID-5c2e6f2a9946f83772d6d63d9a774efd_container_div" class="ccms_form_element cfdiv_text"><label>Youtube URL 3 :</label><input type="text" name="YoutubeURL3" value="" container_id="0" title="" class="step2" size="30" maxlength="150">
<div class="clear"></div><div id="error-message-YoutubeURL"></div></div>
</div>
<input name="input_submit_11" class="" value="Submit" type="submit" container_id="0">
</div>