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

Question

我目前是 webdevlopment 领域的初学者（并且在 stackoverflow 中也是新手..srry 问题格式不佳）。基本上，我遇到了 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 文件中时，这很有效，但是当我在把手模板中做同样的事情时，该函数似乎没有返回任何值，因此在两种情况下都提交了表单。 我怎样才能在车把模板中做同样的事情？？？可能是什么问题？

如果您需要更多信息，请告诉我

Answer 1

socket.on(function) 上的函数可能是异步执行的（也就是说，不是马上，而是将来某个时间），所以当那个return ok 执行时，socket.on(function) 上的函数还没有执行，因此@ 987654325@ 的值仍然是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，我使用了不同的，所以我有进行一些调整）。

代码分解

每条评论：

if (window.validatedEmail === typedEmail) part..就像window.validatedEmail 在做什么，为什么要检查它是否等于typedEmail？

当表单提交时，代码检查是否有一个（全局）变量window.validatedEmail，如果有，它是否等于输入的电子邮件（typedEmail）。

当表单首次提交时，if 将是false，因为不会有window.validatedEmail。现在，当if 是false 时，我们转到else 部分。 else 部分只是向 websocket (socket.emit) 发出验证请求并注册一个侦听器函数 (socket.on('eValidateMessage', function(obj) { ... })，该函数将在验证响应时执行。

当验证响应并执行function(obj) { ... } 时，它会执行以下操作：如果验证消息告诉我们电子邮件未通过验证（即obj.message == false），则它会添加错误消息并启用提交按钮返回，因此用户可以在更改电子邮件后再次按下它。

另一方面，如果验证消息告诉我们电子邮件已验证（这是if 内if 的else 部分function(obj) { ... }），那么我们保存全局变量window.validatedEmail 中的typedEmail（我们知道它刚刚被验证）并重新提交表单。

这一次，当重新提交表单时，它会像往常一样首先检查全局变量window.validatedEmail是否存在，是否等于typedEmail。现在不同的是window.validatedEmail do 将存在——因为我们已经将它保存在function(obj) { ... } 的else 部分。

既然它存在并且等于typedEmail，那么我们只需return true，这样就可以提交表单了。