Required fields and radiobuttons

I am trying to make a form with radiobuttons. People can make a choise out of 6 buttons. When I make the radiobutton required it do not work, because just one button is selected. Now it says that this field is required because the other five are not filled in.

The radiobutton list is build like this:

<input type="radio" name="Gewenst_voertuig" value="klasseA" checked>
<font face="Arial, Helvetica" size="2">klasse A - Bestelauto</font>

every name is the same and the values are different.

Any suggestion would help me out.

Thank you

Hi pim2000,

There's a note on Anrew Tetlaw's site that says

*To use the validate-one-required validator you must first add the class name to only one checkbox/radio button in the group (last one is probably best) and then place all the input elements within a parent element, for example a div element. That way the library can find all the checkboxes/radio buttons to check and place the validation advice element at the bottom of the parent element to make it appear after the group of checkboxes/radio buttons.

I think this will help.

Bob

I am a bit further now. Thanks for the quick advise, but it still gives problems.
I only gave the last one a name:

name="Gewenst_voertuig"
and put the whole radiolist in a div

but it still goes wrong


Do you have any suggestion?

Hi pim 2000,

I think that says class name, not field name. Please try with class="button_group" or something like that.

Bob

OK,

i've a input type, name and value. When I do understand you they have to be filled in for each item. The class must have a name.

I've made a div with the name ' voertuig'

So when I understand you right. Do I have to fill in voertuig in the field 'validate-one-required'

Because I don't find a class?

Hi pim2000,

Here's a snippet of the demo code from Andrew Tetlaw's site. I don't know exactly how this works with ChronoForms

<div class="field-label"><label for="field6">Sex</label>:</div>
<div class="field-label">
<input type="radio" name="field6" id="field6-male" value="Male" />Male<br />
<input type="radio" name="field6" id="field6-female" value="Female" class="validate-one-required" />Female
</div>

Bob<br><br>Post edited by: GreyHead, at: 2007/12/05 15:27

Thank you!
Everything works
You've helped me very well!

Hi Bob,

I know that this is an old post, so I'm not sure if there's a better method today, but I've been trying to figure out how to validate at-least-one checkbox in a form.

I've tried implementing these suggestions with no luck. Is there a form and JavaScript example that I could look at and from which I could learn how to do this correctly?

Thanks in advance,

Nick.

hi, post this part of your form code here and I will try it, whats your Chronoforms version used ?

Thanks for looking into this Bob. Here's the code:

<div class="qanswer_tf">
    <tr>
      <td align="left"><input name="qanswer_a" type="text" size="60"></td>
      <td align="center"><input id="qanswer_tf[]" name="qanswer_tf[]" type="checkbox" value="a_true"></td>
    </tr>
    <tr>
      <td align="left"><input name="qanswer_b" type="text" size="60"></td>
      <td align="center"><input id="qanswer_tf[]" name="qanswer_tf[]" type="checkbox" value="b_true"></td>
    </tr>
    <tr>
      <td align="left"><input name="qanswer_c" type="text" size="60"></td>
      <td align="center"><input id="qanswer_tf[]" name="qanswer_tf[]" type="checkbox" value="c_true"></td>
    </tr>
    <tr>
      <td align="left"><input name="qanswer_d" type="text" size="60"></td>
      <td align="center"><input id="qanswer_tf[]" name="qanswer_tf[]" type="checkbox" value="d_true"></td>
    </tr>
    <tr>
      <td align="left"><input name="qanswer_e" type="text" size="60"></td>
      <td align="center"><input id="qanswer_tf[]" name="qanswer_tf[]" type="checkbox" value="e_true"></td>
    </tr>
</div>

<br><br>Post edited by: GreyHead, at: 2008/04/29 11:08

Hi nosins,

This is a bit unusual in that there are 'input' fields and 'radio' fields interspersed. That may give the code hiccups. Worth a try though . . . I think it should look like:

<div class="qanswer_tf">
  <input name="qanswer_a" type="text" size="60" />
  <input id="qanswer_tfa" name="qanswer_tf[]" type="checkbox" value="a_true" />
  <input name="qanswer_b" type="text" size="60" />
  <input id="qanswer_tfb" name="qanswer_tf[]" type="checkbox" value="b_true" />
  <input name="qanswer_c" type="text" size="60" />
  <input id="qanswer_tfc" name="qanswer_tf[]" type="checkbox" value="c_true" />
  <input name="qanswer_d" type="text" size="60" />
  <input id="qanswer_tfd" name="qanswer_tf[]" type="checkbox" value="d_true" />
  <input name="qanswer_e" type="text" size="60" />
  <input id="qanswer_tfe" name="qanswer_tf[]" type="checkbox" value="e_true" class="validate-one-required" />
</div>

I removed the table code for clarity, and made the field ids unique.

Bob

Thansk for giving it a shot Bob, but unfortunately... no luck.

The only thing that changed was that the form now requires that the last checkbox is checked rather that all checkboxes being checked. If I check the first checkbox, the last checkbox still shows-up as required and the form will not submit without it being checked first.

Thanks again for your effort,

Nick.

try this fix here.

Thanks again for the help.

Forgive me, though, but I don't understand how to use this example. This goes in the javascript form code field? In the case where I use a form like mine (copied below), with a checkbox field name qanswer_tf[] (so that I can get all the values passed), it doesn't seem to do anything.

<div class='qanswer_tf'>
    <tr>
      <td align='left'><input name='qanswer_a' type='text' size='60' /></td>
      <td align='center'><input id='qanswer_tfa' name='qanswer_tf[]' type='checkbox' value='a_true' /></td>
    </tr>
    <tr>
      <td align='left'><input name='qanswer_b' type='text' size='60' /></td>
      <td align='center'><input id='qanswer_tfb' name='qanswer_tf[]' type='checkbox' value='b_true' /></td>
    </tr>
    <tr>
      <td align='left'><input name='qanswer_c' type='text' size='60' /></td>
      <td align='center'><input id='qanswer_tfc' name='qanswer_tf[]' type='checkbox' value='c_true' /></td>
    </tr>
    <tr>
      <td align='left'><input name='qanswer_d' type='text' size='60' /></td>
      <td align='center'><input id='qanswer_tfd' name='qanswer_tf[]' type='checkbox' value='d_true' /></td>
    </tr>
    <tr>
      <td align='left'><input name='qanswer_e' type='text' size='60' /></td>
      <td align='center'><input id='qanswer_tfe' name='qanswer_tf[]' type='checkbox' value='e_true' /></td>
    </tr>
</div>

I don't understand what 'elm' is in that example.

Thanks again,

Nick.

Hi Nick,

The fix is to edit the validation file, moovalidation.js under components/com_chronocontact/js/🙂 nothing to do with ur form code at all!

Sincerely,

Max

Hey Max,

I gave it a shot and it changed something, but it's not working for me... The form won't submit at all now if the validation includes my checkbox field name in the one-required validation field. I have all the checkboxes sharing the same name and id and that name/id, qanswer_tf[], is entered into the validate-on field. When I try to submit, the form doesn't submit at all. I've tried a few things:

Tried submitting before the validation warnings come-up wherein all required fields are filled-out - no luck. In this case, the 'This field is required...' message just moves to the next checkbox (instead of the first).

Any suggestions?

Thanks again,

Nick.

P.S. sorry about the crazy long post before - must have messed something up when trying to post my form code.

Any chance that code posted could be made such that it can be copied? The div and class seems to be the answer to radiobuttons. Also, great idea to have a code snippets library just for these basic form types.

Hi Sailsmart,

The code should be copiable - there seem to be some major formatting problems with the upgraded forum software. Hopefully Max will get it fixed soon.

Bob