jQuery 验证 AJAX 表单答案

【问题标题】：jQuery validation AJAX formjQuery 验证 AJAX 表单
【发布时间】：2017-11-27 14:51:09
【问题描述】：

我正在尝试向我的 ResetPassword 函数添加验证。验证它的工作正常，但我遇到了另一个问题，我的 ResetPassword 功能在我添加验证后无法工作。任何人都可以指导我正确的方向吗？谢谢。

HTML 代码：

<div class="PopUpBG">
  <div class="PopUp">
    <h3 class="modal-title">
      <span>Reset PAssword</span>
    </h3>
    <form id="form">

      <input type="email" name="ResetEmail" id="ResetEmail" placeholder="Email Adresse" required/>

      <input type="submit" class="btn btn-success" value="Send" onclick="ResetPassword(this)"/>

    </form>
  </div>

</div>

重置密码和验证码：

function ResetPassword(e) {

  var email = $("#ResetEmail").val();

  if ($("#form").validate()) {
    return true;
  } else {
    return false;
  }

  $(".PopUp").html("We have sent mail to you");

  $.ajax(
    {
      type: "POST",
      url: "/Account/loginRequestResetPassword",
      dataType: "json",
      data: {
        Email: email,
      },
      complete: function () {
        console.log("send");
        $(".PopUpBG").fadeOut();
      }
    })
}

【问题讨论】：

标签： javascript jquery ajax validation

【解决方案1】：

问题是因为您在发送 AJAX 请求之前总是退出函数，因为您在 if 语句的两个条件中都使用了 return 语句。

更改您的逻辑以仅在验证失败时退出函数：

function ResetPassword(e) {
  if (!$("#form").validate())
    return false;

  $.ajax({
    type: "POST",
    url: "/Account/loginRequestResetPassword",
    dataType: "json",
    data: {
      Email: $("#ResetEmail").val().trim(),
    },
    success: function() {
      console.log("send");
      $(".PopUp").html("We have sent mail to you");
      setTimeout(function() {
        $(".PopUpBG").fadeOut();
      }, 10000); // fadeout the message after a few seconds
    },
    error: function() {
      console.log('something went wrong - debug it!');
    }
  })
}

另外请注意，我修改了逻辑以仅在请求完成后显示成功的电子邮件消息。您当前的代码可以向用户显示“已发送电子邮件”消息，即使该功能仍有可能失败。

【讨论】：