我的javascript函数没有显示所有验证消息

时间:2011-11-16 22:31:34

标签: javascript forms validation dom-traversal

因此,如果两个验证都有效,那么(如果我只是在函数中放置单选按钮验证而没有微调器验证,则单选按钮验证工作,反之亦然),为什么我将两个验证放在函数中,顶部验证哪个是无线电验证工作,但是底部验证是微调器验证,当它被假设时不显示消息?

Code is below:

        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
                <title>Create a Session</title>
                        <script type="text/javascript">

    function validation() {
                    var errMsgO = document.getElementById("radioAlert");
                    var btnRadioO = document.getElementsByName("sessionNo");               
                    var isbtnRadioChecked = false;
                    var errQuesMsgO = document.getElementById("numberAlert");
                    var questionNumberO = document.getElementsByName("txtQuestion");

                    for(i=0; i < btnRadioO.length; i++){
                        if(btnRadioO[i].checked){
                            isbtnRadioChecked = true;
                        }
                    }

                    if(!isbtnRadioChecked) {
                       errMsgO.innerHTML = "Please Select the Number of Sessions you Require";
                    } else {
                        errMsgO.innerHTML = "";
                    }
                    return false; 



        if(questionNumberO[0].value == 0){
            errQuesMsgO.innerHTML = "Please Set the Number of Questions";
        } else {
            errQuesMsgO.innerHTML = "";
        }
           return false; 
                }    
</script>
        </head>
        <body>
        <form action="create_session.php" method="post" name="sessionform">
    <table>
              <tr>
              <th>2: Number of Sessions :</th>
              <td class="sessionNo"><input type="radio" name="sessionNo" value="1" />1</td>
              <td class="sessionNo"><input type="radio" name="sessionNo" value="2" />2</td>
              <td class="sessionNo"><input type="radio" name="sessionNo" value="3" />3</td>
              <td class="sessionNo"><input type="radio" name="sessionNo" value="4" />4</td>
              <td class="sessionNo"><input type="radio" name="sessionNo" value="5" />5</td>
              </tr>
              </table>
              <div id="radioAlert"></div>
        <table>
                    <tr>
                    <th>Number of Questions:</th>
                        <td class="spinner"><textarea class="spinnerQuestion" name="txtQuestion" id="txtQuestion" cols="2" rows="1"></textarea></td>
                        <td><button class="scrollBtn" id="btnQuestionUp"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
                        <button class="scrollBtn" id="btnQuestionDown"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
                        </tr>
                        </table>
                        <div id="numberAlert"></div>
                        <p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="validation()" /></p>      <!-- Prepare Questions here-->

                </form>
        </body>

1 个答案:

答案 0 :(得分:2)

我能发现的一个错误就是行if(questionNumberO == 0){除了你没有用<script> 关闭</script>元素外。

正确的方法是:

if(questionNumberO[0].value == 0){

<强>为什么:

getElementsByName()将返回具有指定name属性的元素集合。如果你知道只有一个,你可以要求第一个([0])。

value属性存储输入元素的当前值。请参阅HTMLInputElement on MDN

更新:我为您创建了working jsFiddle Demo