Question

我写了一个大页面，其中包含一个表单作为我的第一个JavaScript项目。我在这里得到了一些帮助，谢谢。我对目前的情况感到非常满意，但我还有最后一个需要处理的问题。

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

问题是b / c我在onClick上运行所有功能，并且我意识到它们同时运行，无论用户做什么，新窗口都会打开（警报显示在各个地方）。

基于此处的其他类似问题，我尝试添加一个返回false并将true语句返回到我的条件语句中，但这并没有做任何事情。

现在我知道有更好的方法可以做我在这里做的事情，而且我的表单验证是基本的和弱的，但是当我第一次尝试编程时，了解我正在做的一切对我来说非常重要，我现在做的事。

任何人都可以告诉我如何修复此问题，以便只有在表单验证时才会打开新窗口吗？如果可能的话，我宁愿没有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>

Answer 1

而不是使用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()以在必要时使用该触发器。

Answer 2

这是一种无耻的插件，但我刚刚编写了一个开源JS库，试图解决这样的问题。我称之为＆＃34;是＆＃34;。

http://jumpkick-studios.github.io/Is/

它使用了Maybe Monad概念：

http://en.wikibooks.org/wiki/Haskell/Understanding_monads/Maybe

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

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：或许更好的方法是不要使用单个句柄错误功能，因为您可能希望为每个错误的字段显示消息。

所以即使是这样的东西也可以工作（虽然更多的代码）。

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
    }

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

2 个答案: