JS Checkbox Validation Help

Help with JS on Submit V4 Joomla 1.7

I have a checkbox group with six items. My goal is to check to make sure at least three are checked prior to submit. I have the onclick="validate()" on the submit button in the html. I wrote this code and it worked outside of chonoform. The only difference is the document object call out? Any help would be appreciated.

Javascript

function validate() {
  var chks = document.chronoform_Parent_Volunteer_Step_5.getElementsByName('input_volunteer_gameday[]');
  var hasChecked = false;
  var checkCount = 0;
  for (var i = 0; i < chks.length; i++)
  {
    if (chks[i].checked)
    {
      checkCount++;
    }
  }
  if (checkCount < 3)
  {
    alert("Please select at least three.");
    return false;
  }
  return true;
}

Hi fkaram65,

Here's a script that I've written for CFv4 that will validate the maximum and minimum number of boxes checked.

window.addEvent('domready', function() {
  $('input_checkbox_group_0_choice_1').addClass("validate['%countCheck']");
});
var countCheckMax = 3;
var countCheckMin = 1;
function countCheck(el){
  var group = el.getSiblings(['input']);
  group.include(el);
  var count = 0;
  group.each(function(item) {
    if ( item.checked ) {
      count++;
    }
  });
  if ( count > countCheckMax ) {
    el.errors.push("You can only check "+countCheckMax+" items");
    return false;
  } else if ( count < countCheckMin ) {
    el.errors.push("Please check at least "+countCheckMin+" items");
    return false;
  } else {
    return true;
  }
}

At the beginning you need to replace 'input_checkbox_group_0_choice_1' with the id of one of the checkboxes, in this case it is the first. Then set the values of countCheckMax and countCheckMin. If there isn't a minimum set countCheckMin = 0 (zero) if there isn't a maximum countCheckMax to the number of checkboxes in the group.

Bob

Dear Bob,

Thanks I appreciate the help. This is still an onclick event correct?

Fred

Hi Fred,

No. It's complete as it is; it's a custom validation using the ChronoForms/FormCheck code.

Bob

Hello,
I need to do the same test for my form. So I copied this code in the 'easy form wizard' custom code function. Se included in attachement (att 1)the way it's encodes.

While executing the test isn't executed but just the code is shown (see attachement 2).

Can you tell what I do wrong?

Thanks a lot for your appreciated help
Bart

Hi Bart,

Please use the JavaScript Code box on the JS/CSS Settings tab for JavaScript.

Bob

Hi Bob,
Can you exactely tell me where I have to put the code. In attachement I send you a print screen of the place I think it has to be placed.
If it is the case, I've already tried it but none of the rules of the form was executed and it interfered also in the lay out of my site.

Thanks for your answer
Regards
Bart

Hi Bart,

It would go in the Load JS box at the top of the screenshot.

Bob

I have a list of checkboxes and one of the options is "Other". If the user selects other I want to validate that they actually populate the textbox provided.

I would like to work with the ChronoForms/FormCheck code so that I get the validation pop ups on the field.

I basically want to validate the textbox only if other is check. Would you happen to have any other samples I could look at?

I know this snippet isn't correct but this will give you a general idea what I'm trying to do:

window.addEvent('domready', function() {
$('txtOtherSectionNumber').addClass("validate['%Blank_TextField_Validator']");
});

function Blank_TextField_Validator()
{
if (document.getElementById("chkSectionNumber[2]).checked)
{
if (document.getElementById("txtOtherSectionNumber").value == "")
{
// If null display and alert box
alert("Please fill in the other text field.");
return (false);
}
else
{
return true;
}
}
}



Thanks,

JH

Hi hughesie,

There are similar answers for Select drop-downs and radio button groups in this thread. You'll need to modify the code a bit to work with a Checkbox group but the same ideas should be good.

Bob

Hi Bob,
I've put tje code into the code in the load JS but this makes the controles of the form not working any more, I can't click no more on the login button, an accoreon menu isn't working any more,...

Do you have any idea what can cause these problems?

Thanks for your help
Bart

Hi Bart,

It sounds as though there is a JavaScript error in the code you have used, or a conflict with something else on the page. Use your preferred web developer tools - F12 in IE8 or IE9, Shift+Ctrl+I in Chrome, FireBug in FireFox, DragonFly in Opera - to check the JavaScript console to see if there are any error messages.

Bob

Hi Bob,
I'm still struggling with this problem. I'm not really sure how I can figure out if a JS error s present en how to solve it. This is the code I've put in a custom element to be able to show the checkbox group in a table

<div class="ccms_form_element cfdiv_checkboxgroup" id="autoID-d7b9e796d7335b617a5a73a971890399_container_div"><input type="hidden" name="input_basisuren" value="" alt="ghost" />
<div style="float:left; clear:none;">

<table width="99%" border="0">
  <tr>
    <th scope="col"> </th>
    <th align="center" scope="col"><h4><strong>9u30</strong></h4></th>
    <th align="center" scope="col"><h4><strong>10u30</strong></h4></th>
    <th align="center" scope="col"><h4><strong>12u30</strong></h4></th>
    <th align="center" scope="col"><h4><strong>13u30</strong></h4></th>
    <th align="center" scope="col"><h4><strong>14u30</strong></h4></th>
    <th align="center" scope="col"><h4><strong>15u30</strong></h4></th>
    <th align="center" scope="col"><h4><strong>16u30</strong></h4></th>
    <th align="center" scope="col"><h4><strong>18u30</strong></h4></th>
    <th align="center" scope="col"><h4><strong>19u30</strong></h4></th>
  </tr>
  <tr>
    <th valign="middle" scope="row"><h4><strong>Woensdag</strong></h4></th>
    <td align="center"></td>
    <td align="center"></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_1" title="" value="woensdag13u30" class="validate['group[1]'" />
<label for="input_basisuren_1"></label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_2" title="" value="woensdag14u30" class="validate['group[1]'" />
<label for="input_basisuren_2"></label></td>
    <td align="center"> </td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_3" title="" value="woensdag15u30" class="validate['group[1]'" />
<label for="input_basisuren_3">*</label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_4" title="" value="woensdag16u30" class="validate['group[1]'" />
<label for="input_basisuren_4">*</label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_5" title="" value="woensdag17u30" class="validate['group[1]'" />
<label for="input_basisuren_5"></label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_6" title="" value="woensdag19u30" class="validate['group[1]'" />
<label for="input_basisuren_6"></label></td>
  </tr>
  <tr>
    <th valign="middle" scope="row"><h4><strong>Zaterdag</strong></h4></th>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_7" title="" value="zaterdag9u30" class="validate['group[1]'" />
<label for="input_basisuren_7">*</label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_8" title="" value="zaterdag10u30" class="validate['group[1]'" />
<label for="input_basisuren_8">*</label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_9" title="" value="zaterdag12u30" class="validate['group[1]'" />
<label for="input_basisuren_9">**</label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_10" title="" value="zaterdag13u30" class="validate['group[1]'" />
<label for="input_basisuren_10">**</label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_11" title="" value="zaterdag14u30" class="validate['group[1]'" />
<label for="input_basisuren_11">**</label></td>
    <td align="center"><input type="checkbox" name="input_basisuren[]" id="input_basisuren_12" title="" value="zaterdag15u30" class="validate['group[1]'" />
<label for="input_basisuren_12">**</label></td>
    <td align="center"> </td>
    <td align="center"> </td>
    <td align="center"> </td>
  </tr>
</table>

</div><div class="clear"></div><div id="error-message-input_basisuren"></div></div>

In a load JS action I've placed the following code:

window.addEvent('domready', function() {
  $('input_basisuren').addClass("validate['%countCheck']");
});
var countCheckMax = 13;
var countCheckMin = 3;
function countCheck(el){
  var group = el.getSiblings(['input']);
  group.include(el);
  var count = 0;
  group.each(function(item) {
    if ( item.checked ) {
      count++;
    }
  });
  if ( count > countCheckMax ) {
    el.errors.push("You can only check "+countCheckMax+" items");
    return false;
  } else if ( count < countCheckMin ) {
    el.errors.push("Gelieve minimum "+countCheckMin+" uren te selecteren");
    return false;
  } else {
    return true;
  }
}

This is the link to my form:
http://www.tcroelandsveld.be/tcr/2012-01-10-21-48-02/inschrijving-lessen

Can you figure out what is wrong and how I can make this test work.
Thanks a lot for your help
Bart

Hi tcroelandsveld,

The immediate problem I see is that you have used the name here while the $('') syntax requires an ID.

$('input_basisuren').addClass("validate['%countCheck']");

I would give the wrapping div an id, then you can use the MooTools selectors to get all the <input>s inside the div and apply the class using .each()

Here's a snippet I wrote to hide form elements but it includes an example of the code to do this.

function showHide() {
  var inputs = div.getElements('input[type=checkbox]');
  //var inputs = $$('#name_container_div input[type=checkbox]');
  if ( checkbox.checked  ) {
    inputs.each (function(item) {
      item.disabled = false;
    });
    div.reveal();
  } else {
    inputs.each(function(item) {
      item.checked = false;
      item.disabled = true;
    });
    div.dissolve();
  }
}

Bob

Hi Bob,
Thanks for our answer. Unfortunately I'm not a developer so writing some code I'm not really able to. If I put in the code the id of the first checkbox the control is applied but passing isn't possible. The control is always applied even if I check the 12 items in the checkbox. Thats logic because it is only the first item and not all of them.
So if yous solution would work can you please tell me how I have to change my code.

Thanks a lot for your help
Regards
Bart

Good Morning,

I'm having trouble added a JavaScript event to a control that's inside a container. The JavaScript works fine if I don't have the controls in a container but having already built the forms using a containers for the various sections I'm hoping someone can give me a suggestion to get these events to work.

Here is the JavaScript:

window.addEvent('domready', function() {
  var select, other;
  select = $('sectionid_auto_container_div');
  other  = $('SectionID_other');
  switchOther2();
  select.addEvent('click', switchOther2);

  function switchOther2() {
    var checked = $$('input[name=SectionID_Auto]:checked');
    if ( checked.length > 0 && checked[0].value == 'Other' ) {
      other.disabled = false;
    } else {
      other.value = '';
      other.disabled = true;
    }
  }
});

Hi hughesie,

Looking at it here I don't see any obvious problems. Please take a Form Backup using the icon in the Forms Manager and post it here (as a zipped file) or PM or email it to me and I'll take a closer look.

Bob

I got it working but I had to add another other.disabled = true; just before var array (see below).

So basically the code was working but never disabling the text box. Strange because I had it working on another form without this.

window.addEvent('domready', function() {
  var select, other;
  select = $('chkservicesrequestedsec3_container_div');
  other  = $('txtOT_OtherPleaseSpecify');
  switchOtherContainer1();
  select.addEvent('click', switchOtherContainer1);

  function switchOtherContainer1() { 

  //DISABLE TEXT BOX
 other.disabled = true;
 
  var array = [];
	$$("input[type=checkbox]:checked").each(function(i){
		array.push( i.value );
		
    if ( i.value == 'Other' ) {
      other.disabled = false;
    } else {
      other.value = '';
      other.disabled = true;
    }
		
	});    
  }
});

Hi hughesie,

A bit hard to tell just from the code but you probably need that to initialise the hidden textarea as disabled.

Bob