Fatal编程技术网
  • javascript/
  • Javascript 如果没有验证错误，我希望弹出窗口出现

Javascript 如果没有验证错误，我希望弹出窗口出现

javascript validation function

Javascript 如果没有验证错误，我希望弹出窗口出现,javascript,validation,function,popup,project,Javascript,Validation,Function,Popup,Project,我有一个按钮叫做“准备问题”。现在，当我单击此按钮时，此按钮执行两项操作，使用validation（）函数验证表单，以便在表单中出现错误（空文本框和单选按钮未选中）时，在页面上显示相应的错误消息。但该按钮也使用“openSessionPopup”功能，以便打开一个弹出窗口，其中说明“会话”一词 问题是，当我单击按钮时，它会同时执行这两个功能，因此如果存在验证错误，它会显示验证错误，并打开弹出窗口 我想做的是，弹出窗口应该只在没有验证错误后显示。但我似乎无法让它工作，其他人知道怎么做吗 下面是我的

我有一个按钮叫做“准备问题”。现在，当我单击此按钮时，此按钮执行两项操作，使用validation（）函数验证表单，以便在表单中出现错误（空文本框和单选按钮未选中）时，在页面上显示相应的错误消息。但该按钮也使用“openSessionPopup”功能，以便打开一个弹出窗口，其中说明“会话”一词

问题是，当我单击按钮时，它会同时执行这两个功能，因此如果存在验证错误，它会显示验证错误，并打开弹出窗口

我想做的是，弹出窗口应该只在没有验证错误后显示。但我似乎无法让它工作，其他人知道怎么做吗

下面是我的代码：

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

     function validation() {

                    var btnRadioO = document.getElementsByName("sessionNo");               
                    var isbtnRadioChecked = false;;

                    var dateTextO = document.getElementById("datepicker");
                    var timeTextO = document.getElementById("timepicker");


                    var errMsgO = document.getElementById("radioAlert");

                    var errDateTimeMsgO = document.getElementById("dateTimeAlert");
                    var errDateMsgO = document.getElementById("dateAlert");
                    var errTimeMsgO = document.getElementById("timeAlert");


                    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 = "";
                    }                                

         if (dateTextO.value == ''){
                    errDateMsgO.innerHTML = "Please Select a Date";
                }else{
                    errDateMsgO.innerHTML = ""; 
                }

         if (timeTextO.value == ''){
                    errTimeMsgO.innerHTML = "Please Select a Time";
                }else{
                    errTimeMsgO.innerHTML = ""; 
                }
    }

                       function openSessionPopup (session) {
     window.open(session,
     'window',
     'width=500,height=500,scrollbars=yes,status=no');
     }

    </script>
    </head>

    <body>
    <form action="create_session.php" method="post">

     <table>
              <tr>
              <th>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>
     <p><input type="text" id="datepicker" >
                <br/><span id="dateAlert"></span></p>
                <p><input type="text" id="timepicker" >
                <br/><span id="dateTimeAlert"></span><span id="timeAlert"></span></p>

<p><input class="questionBtn" type="button" value="Prepare Questions" name="prequestion" onClick="validation();openSessionPopup(this.href); return false"  /></p>
    </form>

    </body>


创建会话
函数验证（）{
var btnRadioO=document.getElementsByName（“sessionNo”）；
var isbtnRadioChecked=false；；
var dateTextO=document.getElementById（“日期选择器”）；
var timeTextO=document.getElementById（“时间选择器”）；
var errMsgO=document.getElementById（“radioAlert”）；
var errDateTimeMsgO=document.getElementById（“dateTimeAlert”）；
var errDateMsgO=document.getElementById（“dateAlert”）；
var errTimeMsgO=document.getElementById（“timeAlert”）；
对于（i=0；i
首先，您应该将事件处理程序移出html标记

接下来，您应该将事件处理程序绑定到该单击事件

之后，您应该修改您的验证方法，以返回true或false来表示它是否通过了验证

最后，您应该在showpopup方法调用的条件包装中使用该验证结果

差不多

function myClickHandler(){
     if(validation()){
        showSessionPopup();
     }
}
对于您的处理程序，这是如何绑定它的

document.getElementsByName("prequestion")[0].addEventListener('click', myClickHandler);
最后，您可以这样修改您的验证方法

function validation() {
    var result = true;
                var btnRadioO = document.getElementsByName("sessionNo");               
                var isbtnRadioChecked = false;;

                var dateTextO = document.getElementById("datepicker");
                var timeTextO = document.getElementById("timepicker");


                var errMsgO = document.getElementById("radioAlert");

                var errDateTimeMsgO = document.getElementById("dateTimeAlert");
                var errDateMsgO = document.getElementById("dateAlert");
                var errTimeMsgO = document.getElementById("timeAlert");


                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";
                   result = false;
                } else {
                    errMsgO.innerHTML = "";
                }                                

     if (dateTextO.value == ''){
                result = false;
                errDateMsgO.innerHTML = "Please Select a Date";
            }else{
                errDateMsgO.innerHTML = ""; 
            }

     if (timeTextO.value == ''){
                errTimeMsgO.innerHTML = "Please Select a Time";
                result = false;
            }else{
                errTimeMsgO.innerHTML = ""; 
            }

     return result;
}

函数验证（）{
var结果=真；
var btnRadioO=document.getElementsByName（“sessionNo”）；
var isbtnRadioChecked=false；；
var dateTextO=document.getElementById（“日期选择器”）；
var timeTextO=document.getElementById（“时间选择器”）；
var errMsgO=document.getElementById（“radioAlert”）；
var errDateTimeMsgO=document.getElementById（“dateTimeAlert”）；
var errDateMsgO=document.getElementById（“dateAlert”）；
var errTimeMsgO=document.getElementById（“timeAlert”）；
对于（i=0；i
如果有错误，这将使validation（）方法返回false。

我有两个问题，第一个问题是将事件处理程序移到html标记之外是什么意思，第二个问题是如何将函数设置为等于true或false，换句话说，如果所有验证都是明确的，那么如何设置它等于false，否则为true？@MalcolmPickup我编辑了我的答案，以帮助您更好地了解您的解决方案。我添加了如何在javascript中绑定事件以及如何修改验证方法。享受吧！