Fatal编程技术网
  • javascript/
  • 表单验证javascript阻止打开新窗口

表单验证javascript阻止打开新窗口

javascript forms

表单验证javascript阻止打开新窗口,javascript,forms,new-window,Javascript,Forms,New Window,作为我的第一个JavaScript项目，我已经编写了一个包含表单的大型页面。我得到了一些帮助，谢谢。到目前为止，我对自己所拥有的一切感到非常高兴，但我还有最后一个问题需要解决 我将在这里提交的代码是一个测试人员。我有几个附加到onClick新窗口的函数。用户提交表单后，其信息将显示在新窗口中。（当然，我的原始页面更复杂。）有一个名为askForHelp的函数，如果为“状态”输入了特定值，它会在新窗口中显示警报，还有一个非常简单的validateForm，它会在父窗口上显示警报？？如果值保留为空，

作为我的第一个JavaScript项目，我已经编写了一个包含表单的大型页面。我得到了一些帮助，谢谢。到目前为止，我对自己所拥有的一切感到非常高兴，但我还有最后一个问题需要解决

我将在这里提交的代码是一个测试人员。我有几个附加到onClick新窗口的函数。用户提交表单后，其信息将显示在新窗口中。（当然，我的原始页面更复杂。）有一个名为askForHelp的函数，如果为“状态”输入了特定值，它会在新窗口中显示警报，还有一个非常简单的validateForm，它会在父窗口上显示警报？？如果值保留为空，则显示窗口

问题是b/c我所有的函数都在onClick上运行，我意识到它们同时运行，无论用户做什么，新窗口都会打开（警报显示在各个位置）

基于这里的其他类似问题，我尝试在条件句中添加returnfalse和returntrue语句，但这没有起到任何作用

现在我知道有更好的方法来完成我在这里所做的事情，而且我的表单验证是基本的和脆弱的，但是作为我第一次进入编程领域，了解我现在所做的一切对我来说是非常重要的

有人能告诉我如何解决这个问题，使新窗口只在表单验证时打开吗？如果可能的话，我更喜欢不使用jquery或根本不使用代码

我感谢大家的意见。代码如下：

   <!doctype html>
      <html>
         <head>
           <title>test</title>
            <meta charset="utf-8">

       <script type="text/javascript">

          function newWindow() {
            allInfo= open("", "displayWindow");

              allInfo.document.open();

          allInfo.document.write('<!doctype html><html><head><title>Test</title><meta charset="utf-8"></head><body>');
          allInfo.document.write(document.getElementById ('state').value);
          allInfo.document.write('<p>' + document.getElementById ('zip').value);
          allInfo.document.write('</section></body></html>');

              allInfo.document.close();
             }

           function askForHelp () {

              var volunteer = document.getElementById('state').value;

                if ((volunteer == "New York") || (volunteer == "NY") || (volunteer == "New Jersey") || (volunteer == "NJ")) { 
                  allInfo.alert("test test test");
                     return false;
             }
                else {
                     return true; 
             }
             }

            function validateForm () {
              var x = document.getElementById("state").value;
              var y = document.getElementById("zip").value;
                if (x == null || x == "" || y == null || y == "") {
                  alert("Please fill out the required fields.");
                     return false;
             }
                else {
                     return true;
             } 
             }


       </script>

      </head>

          <body>
       <script type="text/javascript">
       </script>

           <form id="infoForm" method="post" name="infoForm">
              <p>State: </p>
                 <p><input type="text" id="state" placeholder="State or Region"></p>

              <p>Zip: </p>
                 <p><input type="text" id="zip" placeholder="Zip code" required /></p>

        <p><input type="button" value="Submit Information" onClick="newWindow(), askForHelp(), validateForm()" ></p>
           </form>
          </body>
       </html>   


测试
函数newWindow（）{
allInfo=打开（“，“显示窗口”）；
allInfo.document.open（）；
allInfo.document.write（“测试”）；
allInfo.document.write（document.getElementById（'state'）.value）；
allInfo.document.write（“”+document.getElementById（'zip'）.value）；
allInfo.文件。书写（“”）；
allInfo.document.close（）；
}
函数askForHelp（）{
var=document.getElementById（'state'）。值；
如果（（志愿者=“纽约”）| |（志愿者=“纽约”）| |（志愿者=“新泽西”）| |（志愿者=“新泽西”）{
allInfo.警报（“测试”）；
返回false；
}
否则{
返回true；
}
}
函数validateForm（）{
var x=document.getElementById（“state”）.value；
var y=document.getElementById（“zip”）.value；
如果（x==null | | x==“”| | y==null | | y==“”）{
警告（“请填写必填字段”）；
返回false；
}
否则{
返回true；
} 
}
声明：



邮编：
而不是使用
newWindow（）、askForHelp（）、validateForm（）进行onClick
为什么不先做其中一个（您想先检查），然后让函数在准备好后调用其他函数呢


 function validateForm () {
   var x = document.getElementById("state").value;
   var y = document.getElementById("zip").value;
   if (x == null || x == "" || y == null || y == "") {
     alert("Please fill out the required fields.");
     return false;
   } else {
     newWindow(); //Validation was successful so lets open the new window
   }
 }



这样，您只能在单击时触发
validateForm（）
触发器，其余的将在需要时触发。您需要在newWindow函数中添加
askForHelp（）
，以便在必要时触发该触发器。
这是一个无耻的插件，但我刚刚编写了一个开源JS库，试图解决类似的问题。我称之为“是”



它使用了单子的概念：



因此，它可以让你用更多的单一责任原则来解决这个问题


var validateState=function(obj){
  return (obj.state!=null) //error check here
}
var validateZip=function(obj){
  return (obj.zip!=null) //error check here 
}
var openWindow=function(){
  //do open window stuff
}

var handleError(){
  //handle errors here
}

var onClick=function(e){
  var form={state:document.getElementById("state").value, zip:document.getElementById("zip").value})
  new jumpkick.Is(form)
    .is(validateState)
    .is(validateZip)
    .then(openWindow)
    .catch(handleError)
    .finally(function(){
      //anything else can go here
    });
}


ETA：也许更好的方法是不使用单个句柄错误函数，因为您可能希望为每个错误字段显示消息

因此，甚至像这样的东西也可以工作（不过需要更多的代码）


好的，我会尝试一下，但是当用户提交表单时，我是否仍然需要执行该函数？是的，当他们提交表单时，它将执行，但只有在验证通过之后。validateForm将首先执行，然后执行NewWindow！这使它能够完全按照我所希望的方式工作，至少在这个测试代码上是这样——但它也应该能够在真实的页面上工作。我将onClick=validateForm（）和newWindow（）作为ese条件放在validateForm函数中（如上所述），然后将askForHelp添加到newWindow函数的底部。非常感谢。你能格式化你的代码吗？像这样读很难。我试着把它格式化得更好。下面的答案非常符合我的要求。很好，但根本不是问题的真正内容。怎么会这样？我真的不想发垃圾邮件，但问题似乎在于如何组织代码，以便在打开窗口之前进行一系列验证。不管发生什么，都应该触发某些代码，并且最终结果应该只在所有验证发生之后发生。这不是一个很好的使用mondadic链吗？另外，将他的代码分解成SRP函数是否也有助于解决这个问题？我阅读的问题特别限于“为什么我总是得到一个弹出窗口以及如何防止它”。值得称赞的是，它确实部分地解决了这个问题。然而，它通过引入一个依赖项和对一个相对高级的编程概念（当他们明确表示希望完全理解代码时）进行大量重组（OP明确表示他们不希望这样做）。我同意OP的代码可以更好，而且你的库也很整洁，但这最好留给用户。这很公平！在我看来，把事情分解成更小的函数使我更容易理解，这就是为什么我在回答中试图说明这一点。但是谢谢你

var onClick=function(e){
      var validInput=true;
      var state=document.getElementById("state").value, zip=document.getElementById("zip").value
      new jumpkick.Is(state)
        .not().isLongerThan(0)        
        .then(function(){
            validInput=false;
            //display message for state
         });
       new jumpkick.Is(zip)
        .not().isLongerThan(0)        
        .then(function(){
            validInput=false;
            //display message for zip
         });
    if(validInput) // openWindow
    }