代码之家  ›  专栏  ›  技术社区  ›  Ankit Kumar

形式:onsubmit不从函数获取返回值

  •  0
  • Ankit Kumar  · 技术社区  · 8 年前

    我目前是Webdevoption领域的初学者(也是stackoverflow领域的新手,因为问题格式不好,请提前阅读)。基本上,我对onsubmit事件有问题,它没有从正在调用的函数中获取返回值。。。。功能是:

      function checkUnique1() {
    var ok = true;
    socket.emit('eCheck', {email: document.getElementsByName("email")[0].value});
    socket.on('eValidateMessage', function(obj) {
      if(obj.message == false)
      {
    
        document.getElementsByName("email")[0].style.borderColor = "#E34234";
        document.getElementById("emailExist").innerHTML = "Email has not been registered";
        document.getElementById("emailExist").style.color = "#E34234";
        ok = false;
      }
    });
    
    
    return ok;}
    

    我正在使用此功能检查数据库中是否存在电子邮件。。如果存在,函数应返回true,onsubmit应激发,否则将返回false,onsubmit不会激发,表单不会提交。。。。这是我的表格:

    <form class="form-horizontal" action="/forgotPass" onsubmit="return checkUnique1()"  method="post" id="formid">
    <div class="form-group">
      <label class="control-label col-sm-4"><h1>Creators Space</h1></label>
      <div class="col-sm-8">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2"></label>
      <div class="col-sm-10">
          <label class="control-label">Please enter the email registered with Creators Space</label>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-6">
        <input type="email" class="form-control" name="email" onclick="emailRSet()" onkeypress="emailRSet()" placeholder="Enter email" required title="email (format: xx@xx.xx/xx@xx.xx.xx)" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
        <span id="emailExist"></span>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-primary" value="submit">Submit</button>
      </div>
    </div>
    

    现在,当上述所有代码都在html文件中时,这种方法很有效,但当我在Handlebar模板中执行相同的操作时,该函数似乎不会返回任何值,因此在这两种情况下都会提交表单。 如何在车把模板中执行相同操作???有什么问题吗??

    如果你需要更多信息,请告诉我

    1 回复  |  直到 8 年前
        1
  •  0
  •   acdcjunior Mukul Kumar    8 年前

    上的函数 socket.on(function) 可能是异步执行的(也就是说,不是立即执行,而是在将来的某个时间执行),所以当 return ok 执行,函数打开 插座on(功能) 尚未执行,因此 ok 仍有价值 true .

    也许像下面这样的方法会奏效:

    function checkUnique1() {
        // make sure only the submit button of that form matches this selector
        var submitButton = document.querySelector("form.form-horizontal button[value='submit']");
        var typedEmail = document.getElementsByName("email")[0].value;
    
        // disable the submit button upon click to prevent multiple submits
        submitButton.disabled = true;
    
        if (window.validatedEmail === typedEmail) {
           // email has been validated, submit form
           return true;
        } else {
          // email has not been validated, request validation
          socket.emit('eCheck', {email: document.getElementsByName("email")[0].value});
          socket.on('eValidateMessage', function(obj) {
            if(obj.message == false)
            {
              document.getElementsByName("email")[0].style.borderColor = "#E34234";
              document.getElementById("emailExist").innerHTML = "Email has not been registered";
              document.getElementById("emailExist").style.color = "#E34234";
    
              // re-enables the submit button, since the email was not validated
              submitButton.disabled = false;
              // clears validatedEmail (since validation failed, no email has been validated)
              window.validatedEmail = null;
            }
            else {
              // 'marks' the typed e-mail as validated
              window.validatedEmail = typedEmail;
    
              // make sure only that form matches this selector
              document.querySelector("form.form-horizontal").submit();
            }
          });
          return false;
        }
    }
    

    上面的代码创建了一个全局变量 window.validatedEmail 最后一封已验证的电子邮件。

    链接演示小提琴进行调试: https://jsfiddle.net/acdcjunior/3v52u69u/2/ (答案有一些变化,因为我没有访问您的websocket,所以我使用了不同的websocket,所以我不得不进行一些修改)。

    代码分解

    根据评论:

    if (window.validatedEmail === typedEmail) 部分比如 窗验证邮件 做什么?为什么要检查它是否等于 typedEmail ?

    表单提交时,代码检查是否存在(全局)变量 窗验证邮件 如果有,是否等于键入的电子邮件( 类型电子邮件 ).

    当表格首次提交时 if false ,因为没有 窗验证邮件 . 现在,当 如果 错误 我们去 else 部分这个 其他的 part只是向websocket发出验证请求( socket.emit )并注册侦听器函数( socket.on('eValidateMessage', function(obj) { ... } )这将在验证响应时执行。

    验证响应时,以及 function(obj) { ... } 执行时,它会执行以下操作:如果验证消息告诉我们电子邮件未经验证(即, obj.message == false ),然后添加错误消息并启用“提交”按钮,以便用户在更改电子邮件后再次按下该按钮。

    另一方面,如果验证消息告诉我们 已验证(这是 其他的 部分 如果 在…内 函数(obj){…} ),然后保存 类型电子邮件 (我们知道刚刚验证过)在全局变量中 窗验证邮件 并重新提交表格。

    这一次,当表单重新提交时,它将像往常一样首先检查全局变量 窗验证邮件 存在,如果等于 类型电子邮件 . 现在不同的是 窗验证邮件 do将存在,因为我们已将其保存在 其他的 部分 函数(obj){…} .

    既然它存在并且等于 类型电子邮件 ,那么我们 return true ,这将允许提交表单。

    推荐文章