Link to home
Start Free TrialLog in
Avatar of jeffmace
jeffmace

asked on

Required Radio Buttons don't alert in order

I have a form using <CFFORM> and I have the radio buttons to be required.  But if i hit submit to test the required attribute, the alert comes up, but will start with "You must fill in question 9", then "question 6", ect..  Why won't it start with "Please answer question 1", then 2, 3, etc.

 <TR>
    <TD width="17" align="center" valign="top" class="TDtitle">1</TD>
    <TD width="323" align="left" class="normaltextreg">I learned something new that was important.</TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 1!" name="Q1" value="5" tabindex="1"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 1!" name="Q1" value="4" tabindex="1"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 1!" name="Q1" value="3" tabindex="1"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 1!" name="Q1" value="2" tabindex="1"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 1!" name="Q1" value="1" tabindex="1"></TD>
  </TR>
  <TR>
    <TD width="17" align="center" valign="top" class="TDtitle">2</TD>
    <TD class="normaltextreg">I verified some important information.</TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 2!" name="Q2" value="5" tabindex="2"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 2!" name="Q2" value="4" tabindex="2"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 2!" name="Q2" value="3" tabindex="2"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 2!" name="Q2" value="2" tabindex="2"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 2!" name="Q2" value="1" tabindex="2"></TD>
  </TR>
  <TR>
    <TD width="17" align="center" valign="top" class="TDtitle">3</TD>
    <TD class="normaltextreg">I plan to discuss this information with colleagues.</TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 3!" name="Q3" value="5" tabindex="3"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 3!" name="Q3" value="4" tabindex="3"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 3!" name="Q3" value="3" tabindex="3"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 3!" name="Q3" value="2" tabindex="3"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 3!" name="Q3" value="1" tabindex="3"></TD>
  </TR>
  <TR>
    <TD width="17" align="center" valign="top" class="TDtitle">4</TD>
    <TD class="normaltextreg">I plan to seek more information on this topic.</TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 4!" name="Q4" value="5" tabindex="4"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 4!" name="Q4" value="4" tabindex="4"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 4!" name="Q4" value="3" tabindex="4"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 4!" name="Q4" value="2" tabindex="4"></TD>
    <TD align="center"><CFINPUT type="radio" required="yes" message="Please answer question 4!" name="Q4" value="1" tabindex="4"></TD>
  </TR>
Avatar of anandkp
anandkp
Flag of India image

Hi Jeff,

I am a bit confused with ur code !

y is it that - even thou u have ur inputs as radio buttons - u dont have one of them checked by default !

normally a radio buttons are used - when the user needs to select atleast one option in order to continue
& since in ur case - all of them are required !

u cld change ur code to this :
<TR>
      <TD WIDTH="17" ALIGN="center" VALIGN="top" CLASS="TDtitle">1</TD>
      <TD WIDTH="323" ALIGN="left" CLASS="normaltextreg">I learned something new that was important.</TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 1!" NAME="Q1" VALUE="5"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 1!" NAME="Q1" VALUE="4"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 1!" NAME="Q1" VALUE="3"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 1!" NAME="Q1" VALUE="2"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 1!" NAME="Q1" VALUE="1" CHECKED="Yes"></TD>
</TR>
<TR>
      <TD WIDTH="17" ALIGN="center" VALIGN="top" CLASS="TDtitle">2</TD>
      <TD CLASS="normaltextreg">I verified some important information.</TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 2!" NAME="Q2" VALUE="5"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 2!" NAME="Q2" VALUE="4"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 2!" NAME="Q2" VALUE="3"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 2!" NAME="Q2" VALUE="2"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 2!" NAME="Q2" VALUE="1" CHECKED="Yes"></TD>
</TR>
<TR>
      <TD WIDTH="17" ALIGN="center" VALIGN="top" CLASS="TDtitle">3</TD>
      <TD CLASS="normaltextreg">I plan to discuss this information with colleagues.</TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 3!" NAME="Q3" VALUE="5"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 3!" NAME="Q3" VALUE="4"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 3!" NAME="Q3" VALUE="3"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 3!" NAME="Q3" VALUE="2"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 3!" NAME="Q3" VALUE="1" CHECKED="Yes"></TD>
</TR>
<TR>
      <TD WIDTH="17" ALIGN="center" VALIGN="top" CLASS="TDtitle">4</TD>
      <TD CLASS="normaltextreg">I plan to seek more information on this topic.</TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 4!" NAME="Q4" VALUE="5"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 4!" NAME="Q4" VALUE="4"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 4!" NAME="Q4" VALUE="3"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 4!" NAME="Q4" VALUE="2"></TD>
      <TD ALIGN="center">
      <CFINPUT TYPE="radio" REQUIRED="yes" MESSAGE="Please answer question 4!" NAME="Q4" VALUE="1" CHECKED="Yes"></TD>
</TR>

let me know - if this helps ur cause !

K'Rgds
Anand
if u go with the above scenario - then u wont need to use "message" attribute

also u cld use normal radio buttons & have onsubmit event fired to check for teh validations & get thigns done accordingly !

but i feel - since all are mandatory the above code shld do the needfull

K'Rgds
Anand
Avatar of jeffmace
jeffmace

ASKER

What is the proper way to use the 'onsubmit' event to validate it?  Do you have an example?
if you are going to automatically check one, then the whole point of validation goes out the window, as they cannot uncheck a radio button group.

to see the code you'd need just look at the source of the completed (and run) page.  you can see the source and then use that to make sure they are checked in order.
ASKER CERTIFIED SOLUTION
Avatar of anandkp
anandkp
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi Jeff,

ne-luck ???
let me know - if u need more help !