时间戳

首页 > 解决方案 > 在使用 jquery 验证器对不在表单标签中的按钮进行验证后提交表单

javascript - 在使用 jquery 验证器对不在表单标签中的按钮进行验证后提交表单

问题描述

从那以后，我一直在与此代码的问题作斗争。碰巧表单没有在此按钮上提交。该按钮是按钮类型，而不是在表单标签中。

$("#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 调用.. 请帮助

标签： javascriptjqueryjquery-validate

解决方案

你把 Ajax 放在一个submit....

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

  ....

  if (userForm.valid()) {

    userForm.submit(function () {

      ....

      $.ajax({ ....

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

Ajax 的最佳位置是submitHandler在.validate()方法的内部。

如果您的按钮在表单之外，您将捕获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.
});

阅读submitHandler.

推荐阅读