javascript - 如何在进入下一页之前验证单选按钮？

Question

我有一个带有单选按钮的表单，在进入下一页之前我想先验证它们我点击“下一步”按钮。

 <cfloop index="i" from="1" to="4">
                 <cfset question = GetEmployeeCSEDepts["csedept_question" & i][GetEmployeeCSEDepts.CurrentRow]>
                   <cfif question neq "">
                       <tr>
                        <cfif i is 1><td>Leadership <br/>               
                        </td></cfif>
                        <cfif i is 2><td>Integrity<br/>                     
                        </td></cfif>
                        <cfif i is 3><td>Service<br/>
                        </td></cfif>
                        <cfif i is 4><td>Teamwork<br/>          
                        </td></cfif>

                         <td valign="top">    <div align="center">  <input type="radio" name="sltRating#i#" value="5"></div><br></td>
                            <td valign="top"><div align="center">       <input type="radio" name="sltRating#i#" value="4.5"></div><br></td>
                            <td valign="top"><div align="center">       <input type="radio" name="sltRating#i#" value="4"></div><br></td>
                            <td valign="top">   <div align="center">    <input type="radio" name="sltRating#i#" value="3.5"></div><br></td>

                     </tr>
                  </cfif>
                </cfloop>

当我单击“下一步”时，出现错误“ReferenceError:validateNext 未定义”。也许这不是最好的方法。我怎样才能让它发挥作用？

 <button type="button" id="btnNext" onclick="validateNext()">Next </button>
<script type="text/javascript" language="javascript">
function validateNext(){
if (!document.feedback.field[0].checked &&
!document.feedback.field[1].checked &&
!document.feedback.field[2].checked) && !document.feedback.field[2].checked){
    // no radio button is selected
    alert ('please make sure all questions are check');
    return false;
}
console.log('testing');
}

</script>

Answer 1

您的 if 语句中有一个额外的括号。删除它并重试。

if (!document.feedback.field[0].checked &&
!document.feedback.field[1].checked &&
!document.feedback.field[2].checked && !document.feedback.field[2].checked)

已编辑:这可能是您的 html 格式问题，可能是您的“form”标签格式不正确。此外，不要使用 field[0]，而是显式使用输入字段的名称。

 <cfoutput>
    <form name="feedback">
      <table>
    <cfloop index="i" from="1" to="4">
                         <cfset question = GetEmployeeCSEDepts["csedept_question" & i][GetEmployeeCSEDepts.CurrentRow]>

        <cfif question neq "">
            <tr>
            <cfif i is 1><td>Leadership <br/>
            </td></cfif>
            <cfif i is 2><td>Integrity<br/>
            </td></cfif>
            <cfif i is 3><td>Service<br/>
            </td></cfif>
            <cfif i is 4><td>Teamwork<br/>
            </td></cfif>

                <td valign="top">   <div align="center">   <input type="radio"  name="sltRating#i#" value="5"></div><br></td>
                <td valign="top">   <div align="center">   <input type="radio"  name="sltRating#i#" value="4.5"></div><br></td>
                <td valign="top">   <div align="center">   <input type="radio"  name="sltRating#i#" value="4"></div><br></td>
                <td valign="top">   <div align="center">   <input type="radio"  name="sltRating#i#" value="3.5"></div><br></td>

            </tr>
        </cfif>
    </cfloop>
    </table>
        <button type="button" id="btnNext" onclick="return validateNext();">Next </button>
    </form>
    <script type="text/javascript" language="javascript">
        function validateNext(){

            if($("input:radio[name='sltRating1']").is(":checked") && $("input:radio[name='sltRating2']").is(":checked") && $("input:radio[name='sltRating3']").is(":checked") &&$("input:radio[name='sltRating4']").is(":checked") ){

                alert ('please make sure all questions are check');
                return false;
            }

        }

    </script>
    </cfoutput>