Checkbox validation prevent submission

I’ve group of checkboxes which are set to “one required” via wizard. I’ve verified generated code and confirmed that all checkboxes have proper name which is “itemsincluded[]”. When one of the checkboxes is selected and user attempts to submit form “selection required” message is still displayed next to that field preventing submission. Which additional information you guys need in order to help me?

Thanks in advance

Hi itrushn,

A link to the form would be the most useful.

IIRC for validate-one-required to work correctly the checkboxes in the array must have an immediate common parent. This may not be true if you've used table cesll for the layout.

Bob

Hi itrushn,

A link to the form would be the most useful.

IIRC for validate-one-required to work correctly the checkboxes in the array must have an immediate common parent. This may not be true if you've used table cesll for the layout.

Bob

I am unable to provide link to form at this time, since its used in private section of the site. What do you mean by "an immediate common parent"?

Hi itrshn,

I'm not sure how to describe it any better. The <input> tags must all be inside the same <div> or <td> with no otehr tag between them and the parent tag.

<div>
<input />
<input />
</div>

is OK

<div>
<td><input /></td>
<td><input /></td>
</div>

is not OK.

Bob

Code looks fine. I have just noticed that its not working properly in Internet Explorer, but does in Google Chrome.

<div class="form_item">
	<div class="form_element cf_checkbox">
		<label class="cf_label" style="width: 150px;">
			Included Items</label>
		<div class="float_left">
			<input value="AC Adapter/Power Cord" title="selection required" class="radio validate-one-required" id="check00" name="check0[]" type="checkbox" />
			<label for="check00" class="check_label">AC Adapter/Power Cord</label>
			<br />
			<input value="Battery" title="selection required" class="radio validate-one-required" id="check01" name="check0[]" type="checkbox" />
			<label for="check01" class="check_label">Battery</label>
			<br />
			<input value="OS/Software CD" title="selection required" class="radio validate-one-required" id="check02" name="check0[]" type="checkbox" />
			<label for="check02" class="check_label">OS/Software CD</label>
			<br />
			<input value="None" title="selection required" class="radio validate-one-required" id="check03" name="check0[]" type="checkbox" />
			<label for="check03" class="check_label">None</label>
			<br />
		</div>
		<a class="tooltiplink" onclick="return false;">
			<img height="16" border="0" width="16" class="tooltipimg" alt="" src="/components/com_chronocontact/css/images/tooltip.png" /></a>
		<div class="tooltipdiv">
			Included Items :: tool tip.</div>
	</div>
	<div class="cfclear"> </div>
</div>

Hi itrushn,

Works OK in IE7 and in FF here.

Bob

That code worked well for couple of days in IE8 as well. Later I've made couple tweaks to the form and that break it. Those tweaks were minor such as changing validation messages etc... Any other places where I need to check?

Hi itrushn,

There's no ChronoForms problem here that I can see so probably there's a JavaSCript conflict with something else in your template or page.

Bob

Well I have the exact same problem with this:

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" >Voix préférée</label>
    <div class="float_left">
      <input value="Féminine" title="Cette information est obligatoire" id="check00" class="radio validate-one-required" name="Voix" type="checkbox" />
      <label for="check00" class="check_label">Féminine</label>
      <br />
      
<input value="Masculine" title="Cette information est obligatoire" id="check01" class="radio validate-one-required" name="Voix" type="checkbox" />
      <label for="check01" class="check_label">Masculine</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Voix d'enregistrement :: Choisissez la voix dans laquelle votre bouquet sera enregistré</div>
  </div>
  <div class="cfclear"> </div>
</div>

When removing class="radio validate-one-required" the form validates ok in IE, when putting the class, the form fails to validate with IE but still works with chrome, FF and safari

Hi alrerna,

This code validates in FF3, IE7, IE8, and Chrome.

But I actually think you want to use Radio buttons not checkboxes here.

Bob

Well it did not work in IE7 and IE8, maybe problems with my template.

I switched to a dropdown list which is working ok, will try radio button 🙂