Question

我有一个表单，我有单选按钮，在我转到下一页之前我想验证它们我点击了＆＃39; NEXT＆＃39;按钮。

 <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>

点击＆＃39; next＆＃39;我收到错误＆＃39; ReferenceError：validateNext未定义＆＃39;。也许这不是最好的方法。我怎样才能使它发挥作用？

 <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格式问题可能是您的'表单'标记格式不正确。另外，不使用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>

Answer 2

您收到该错误，因为脚本标记位于对validateNext的调用之后。

JavaScript按顺序执行，因此您需要在onclick中使用之前声明脚本。或者更好的是使用不引人注目的javascript

快速修复：

<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>
<button type="button" id="btnNext" onclick="validateNext()">Next </button>

更好的修复：

<button type="button" id="btnNext">Next </button>
<script type="text/javascript" language="javascript">
 var button = document.getElementById("btnNext");
 button.addEventListener('click', validateNext, false);

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');
}

注意我完全从html中删除了onclick。

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

2 个答案: