Forums

Clicking on the checkboxes breaks a table.

jrmobile 12 Jan, 2010
Hi
I hope someone will be able to help me on the problem.

I have a set of checkboxes on the form formated as a table.

When user clicks on any checkbox it seems JS validation adds another column to the table and whole table shifts to the right for every checkbox.

Slightly annoying bug i should tell ya.

You can see an example here http://winterstardance.ru/index.php?option=com_chronocontact&Itemid=144&chronoformname=Registration_Pro_AM_EN&lang=en

Please, would someone give me a hand on this issue.

Thanks
GreyHead 13 Jan, 2010
Hi jrmobile,

There are a couple of things going on here.

First, the select-one-required validation required a shared parent for the radio button groun and your table layout doesn't have one.

Second, if there is a shared parent tag then you only need teh validation on the last input in the group.

Third, there is a little bug in ChronoForms somewhere that puts a space into the validation message div.

You are probably going to need to rethink your layout, or to use a custom validation message.

Bob
jrmobile 13 Jan, 2010
Thanks for your suggestions, Bob.

What do you think about this solution.

If i will remove select-one-required tag from the checkboxes and will enable on submit validation of the form for one selected. Will it solve the problem?
GreyHead 13 Jan, 2010
Hi jrmobile,

I think so - make a copy of the form to test and try it out.

Bob
jrmobile 13 Jan, 2010
Hi Bob.

I've just checked the form again and i founf that all of my checkboxes has no validate-one-required class.
It's just class="radio"

I'm stuck again here.

Would you like me to post a form code or send you the form backup file?

Thanks
GreyHead 13 Jan, 2010
Hi Jrmobile,

The ChronoForms must be adding them somewhere along the line. Here's the page source
<table style="text-align: center;" align="center" cellpadding="5">
<tbody><tr><th>Scholarship</th>
<th>Single Dance</th>
</tr><tr>
<td><input name="agesingle" class="radio validate-one-required" value="A" type="radio"> A до 35</td>
<td><input name="agescholarship" class="radio validate-one-required" value="A1" type="radio"> A1 (20-30)</td>
</tr>
<tr>
<td><input name="agesingle" class="radio validate-one-required" value="B" type="radio"> B 35-50</td>
<td><input name="agescholarship" class="radio validate-one-required" value="A2" type="radio"> A2 (30-40)</td>
</tr>
<tr>
<td><input name="agesingle" class="radio validate-one-required" value="C" type="radio"> С от 60</td>
<td><input name="agescholarship" class="radio validate-one-required" value="B1" type="radio"> B1 (40-50)</td>
</tr>
<tr>
<td></td>
<td><input name="agescholarship" class="radio validate-one-required" value="B2" type="radio"> B2 (50-60)</td>
</tr>
</tbody></table>
validate-one required won't work like this. The group of radio buttons must be in the same parent tag <div> or <td> and have the same name.

Bob
jrmobile 13 Jan, 2010
Hi Bob,

I've got you. Just to have a clean experiment i've erased the remaining validation tags from the form, but nothing changed.

Looks like, its not one-required validation but something else?
jrmobile 13 Jan, 2010
Hi Bob,
I apologize for being such annoying.

I was able to fix the issue, but i don't know if this solution may impact something else on our site.

I have erased from jsvalidation2.js file following string

			name = new LiveValidation(field, { 
				validMessage: ' ',
				onlyOnBlur: true,
				insertAfterWhatNode : field.parentNode
			});


It seems now it is working correctly, but i affraid something may not work after that action.
Would you please let me know if this could cause any troubles for me?

Thanks in advance.
GreyHead 14 Jan, 2010
Hi jrmobile,

As you'd expect, some or all of the validation will fail.

Bob
This topic is locked and no more replies can be posted.