Validation breaks form in IE - fine in all others

Hi,

I've got a form on my site that works fine with every browser, except IE (yeah, I know)...

It appears to be a problem primarily with the validation, but I'm not 100% sure that's it. What happens is that I have check boxes in groups, so their named things like 'contact-time[]' and validation is set to require at least one. In IE, it doesn't matter what you check, the validation warning always comes up and doesn't allow submission of the form.

Here are the details of the form, including the javascript and custom css...

Javascript:

function change_country()
{
    var country = $('country_list');
    var selects = $$('div.select');
    for ( var i = 0; i < selects.length; i++ ) {
        if ( selects[i].id == country.value ) {
            selects[i].style.display = 'block';
        } else {
            selects[i].style.display = 'none';
        }
    }
}

css:

form#ChronoContact_Beta_Application {
margin: 0 auto;
width: 750px;
}

.form_element .check_label {
	padding:0px 10px 0px 22px;
	float:none;
	display:inline;
	line-height: 22px;
	vertical-align: middle;
}
.form_element .radio_label {
	padding:0px 10px 0px 22px;
	float:none;
	display:inline;
	line-height: 22px;
	vertical-align: middle;
}

.form_divider {
width:75%;
background-color:rgb(170, 174, 137);
border: 0;
height:1px;
}

form code:

<div class="form_item">
	<div class="form_element cf_heading">
		<h3 class="cf_text">Contact Info</h3>
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" style="width:250px;">Name:</label>
		<input class="cf_inputbox required" maxlength="150" size="30" title="Please include your name." id="name" name="name" type="text" />
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" style="width: 250px;">Email:</label>
		<input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Please include a valid email address." id="email" name="email" type="text" />
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" style="width: 250px;">Address:</label>
		<input class="cf_inputbox" id="address" title="" size="30" maxlength="150" name="address" type="text" />
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" style="width: 250px;">City:</label>
		<input class="cf_inputbox" id="city" title="" size="30" maxlength="150" name="city" type="text" />
	</div>
	<div class="cfclear"> </div>
</div>
<div class="form_item">
	<div class="form_element">
		<div id="country">
			<label class="cf_label" style="width: 250px;">Country:</label>
			<select id="country_list" name="country_list" style="width:160px;" onChange="change_country();">
				<option value="canada">Canada</option><option value="usa" selected="selected">USA</option>
			</select>
		</div>
	</div>
</div>
<div class="form_item">
	<div id="usa" class="form_element select" style="display:block;">
		<label class="cf_label" style="width: 250px;">State/Province:</label>
		<select id="state_list" name="state_list" style="width:160px;">
			<option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option>
		</select>
	</div>
	<div id="canada" class="form_element select" style="display:none;">
		<label class="cf_label" style="width: 250px;">State/Province:</label>
		<select id="state_list" name="state_list" style="width:160px;">
			<option value="AB">Alberta</option><option value="BC">British Columbia</option><option value="MN">Manitoba</option><option value="NB">New Brunswick</option><option value="NF">Newfoundland</option><option value="NS">Nova Scotia</option><option value="NW">Northwest Territories</option><option value="ON">Ontario</option><option value="PEI">Prince Edward Island</option><option value="QC">Quebec</option><option value="SK">Saskatchewan</option>
		</select>
	</div>
</div>

<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" style="width: 250px;">ZIP/Postal Code:</label>
		<input class="cf_inputbox" id="zip" title="" size="30" maxlength="150" name="zip" type="text">
	</div>
	<div class="cfclear"> </div>
</div>
<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" style="width: 250px;">Phone:</label>
		<input class="cf_inputbox" maxlength="150" size="30" title="" id="phone" name="phone" type="text" />
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_radiobutton">
		<label class="cf_label" style="width: 250px;">How would you prefer to be contacted?</label>
		<div class="float_left">
			<input value="Email" title="Please select how you would like to be contacted." class="radio" id="contact_email" name="contact_method" type="radio" />
			<label for="contact_email" class="radio_label">Email</label>
			<br />
			<input value="Phone" title="Please select how you would like to be contacted." class="radio" id="contact_phone" name="contact_method" type="radio" />
			<label for="contact_phone" class="radio_label">Phone</label>
			<br />
		</div>
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_checkbox">
		<label class="cf_label" style="width: 250px;">What time of day would you prefer to be contacted?</label>
		<div class="float_left">
			<input value="Morning" title="Please select at least one timeframe that is good for contacting you." class="checkbox validate-one-required" id="morning" name="contact_time[]" type="checkbox" />
			<label for="morning" class="check_label">Morning</label>
			<br />
			<input value="Afternoon" title="Please select at least one timeframe that is good for contacting you." class="checkbox validate-one-required" id="afternoon" name="contact_time[]" type="checkbox" />
			<label for="afternoon" class="check_label">Afternoon</label>
			<br />
			<input value="Evening" title="Please select at least one timeframe that is good for contacting you." class="checkbox validate-one-required" id="evening" name="contact_time[]" type="checkbox" />
			<label for="evening" class="check_label">Evening</label>
			<br />
		</div>
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_heading">
		<h3 class="cf_text">Practice Info</h3>
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_textbox">
		<label class="cf_label" style="width: 250px;">How many active clients do you have?</label>
		<input class="cf_inputbox validate-number" maxlength="3" size="3" title="Please indicate the number of active clients you have, using numerals." id="client_number" name="client_number" type="text" />
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_checkbox">
		<label class="cf_label" style="width: 250px;">With what types of clients do you work?</label>
		<div class="float_left">
			<input value="Individuals (Life Coaching)" title="Please select at least one of the options." class="checkbox validate-one-required" id="individuals" name="client_types[]" type="checkbox" />
			<label for="individuals" class="check_label">Individuals (Life Coaching)</label>
			<br />
			<input value="Executives" title="Please select at least one of the options." class="checkbox validate-one-required" id="executives" name="client_types[]" type="checkbox" />
			<label for="executives" class="check_label">Executives</label>
			<br />
			<input value="Corporate Clients" title="Please select at least one of the options." class="checkbox validate-one-required" id="corporate" name="client_types[]" type="checkbox" />
			<label for="corporate" class="check_label">Corporate Clients</label>
			<br />
		</div>
	</div>
	<div class="cfclear"> </div>
</div>

<div class="form_item">
	<div class="form_element cf_textarea">
		<label class="cf_label" style="width: 250px;">How would you describe the kind of coaching you do?</label>
		<textarea class="cf_inputbox required" rows="4" id="coaching_description" title="" cols="30" name="coaching_description"></textarea>
	</div>
	<div class="cfclear"> </div>
</div>

<hr class="form_divider">

<div class="form_item">
	<div class="form_element cf_textarea">
		<label class="cf_label" style="width: 250px;">How did you find out about Tapintu and the JOG Your Right Brain pre-release testing group?</label>
		<textarea class="cf_inputbox required" rows="2" id="discovered" title="" cols="30" name="discovered"></textarea>
	</div>
	<div class="cfclear"> </div>
</div>

<hr class="form_divider">

<div class-"form_item">
	<div class="form_element cf_cftext">
		{ReCaptcha}
	</div>
</div>

<div class="form_item">
	<div class="form_element cf_button">
		<input value="Submit" name="submit" type="submit" />
	</div>
	<div class="cfclear"> </div>
</div>

Is there anything there that's obviously the problem? I love the way it works in all browsers other than IE, so I'm hoping there's a fix rather than needing to redo it significantly.

Thanks,
Scott

I've just been testing this form with serverside validation to see if I could fix the problem that way. It appears the issue may be with the checkbox groups rather than with the validation scripts per se.

So, it seems that for some reason IE isn't liking the checkbox groups - I think I've done it all correctly, using element naming such as 'contact_time[]' but IE is still choking on those.😟

Hi Scott,

Past midnight here so I'm about to pack up.

I just made a quick copy of your form pasting in the code you posted here and that works fine in IE 6, 7 & 8 so I'm wondering if the problem is with the ReCaptcha code which I haven't enabled.

You may be better off with the ChronoForms imageverification.

Bob

Thanks Bob.

It turns out it was something entirely unrelated to the form itself...

I'm using a RocketTheme template and had enabled the 'Input Styling' - it turns out that there must have been some kind of conflict between that and something in the form that IE didn't like.

Disabling the Input Styling in the template seems to have fixed the problem - both types of validation now work (mootools and serverside) and the ReCaptcha is also fine.

As much as I prefer the input styling of the template, unfortunately I don't really have more time to troubleshoot and see if I can figure it out (although it occurs to me that maybe changing the z-index values of the overlays might work - so I might give that a try).

Thanks,
Scott