在不在表单标记中的按钮上使用 jquery 验证器验证后提交表单

Question

从那以后，我一直在与这段代码的错误作斗争。碰巧表单没有在此按钮上提交。按钮类型为button，不在form标签中

$("#step1Btn").click(function () {

  var userForm = $("form[name='step1Form']");

  if (userForm.valid()) {
    userForm.submit(function () {
      console.log('submitted o!')
      $("#spin1").show();
      $("form[name='step1Form'] > span").remove();
      $('input[name="emailInput"]').prop('name', "id")
      $('input[name="fullNameInput"]').prop('name', "full-name")
      $('input[name="phoneInput"]').prop('name', "phone-number")

      $.ajax({
        type: 'POST',
        url: "api/v1/user?" + $(this).serialize(),
        success: (result) => {
          localStorage.setItem('user', JSON.stringify(result))
          localStorage.setItem('authToken', result.authToken);
          $("form[name='step1Form'] > span").remove()
          $('#step1, #step2').toggle();
          $('#step1Title, #step2Title').toggle();

        },
        error: function (request, exception, errorThrown) {
          $("form[name='step1Form'] > span").remove();
          $("form[name='step1Form']").prepend('<span class=\'error\'><p>' + request.responseJSON.message + '</p></span>')
        },
      })
    });
  } else {
    return false;
  }
});

下面是完整的表格

<div id="step1" class="col-12 col-md-6">
    <form name="step1Form">
        <div class="home-icon d-flex justify-content-center align-items-center flex-column">
            <img src="images/new-icons/user.png" alt="User Registration logo" height="80" />
            <p class="my-3">User Registration</p>
        </div>
        <div class="form-group">
            <label for="fullNameInput">Contact full name</label>
            <input name="fullNameInput" class="form-control custom-input" placeholder="First name    Last name" id="fullNameInput">
        </div>
        <div class="form-group">
            <label for="emailInput">Contact email address</label>
            <input name="emailInput" type="email" placeholder="example@email.com" class="form-control custom-input" id="emailInput">
        </div>
        <div class="form-group">
            <label for="confirmEmailInput">Confirm contact email address</label>
            <input name="confirmEmailInput" type="email" placeholder="example@email.com" class="form-control custom-input"
                id="confirmEmailInput">
        </div>
        <div class="form-group">
            <label for="phone">Contact phone number</label>
            <input name="phoneInput" placeholder="08012345678" class="form-control custom-input" id="phone">
        </div>

    </form>
    <button type="button" class="btn red-btn user-btn custom-btn" id="step1Btn">Next<i id="spin1" class="fa fa-spinner fa-spin"></i></button>
</div>

所以我想看看我哪里错了。每当我在 if(userForm.valid) 和 userForm.submit() 之间放置一个 console.log 时，我都能够记录并查看输出。

但是一旦我将它放入 userform.submit() 中，我就没有得到任何返回值。就像，表单完全没有提交。我不知道是不是因为我打电话的方式 Ajax.. 请帮助

Answer 1

您将 Ajax 放在 submit 中......

$("#step1Btn").click(function () {

  ....

  if (userForm.valid()) {

    userForm.submit(function () {

      ....

      $.ajax({ ....

这没有意义，因为 Ajax 替换了实际的提交。通过这样做，您可以有效地再次通过验证发送它；我看不到 .validate() 方法，但怀疑您只是在使用默认选项，这将是另一个常规 submit...您可能陷入无处可去的循环。

The best place for your Ajax would be inside the submitHandler of the .validate() method.

如果您的按钮在表单之外，您可以捕获 click 并手动触发提交，然后让验证插件接管其余部分。

$("#step1Btn").click(function () { // click of external button
    $("form[name='step1Form']").submit();  // trigger validation & submission
});

$("form[name='step1Form']").validate({  // initialize plugin
    submitHandler: function(form) { // fires when valid
        //  YOUR AJAX GOES INSIDE HERE
        return false;
    },
    // other options, rules, etc.
});

Read the documentation for the submitHandler.

在不在表单标记中的按钮上使用 jquery 验证器验证后提交表单

Submitting a form after validating with jquery validator on a button not in form tag

javascript

jquery

jquery-validate