Отправка формы после проверки с помощью jquery validator для кнопки, не находящейся в теге формы

Question

С тех пор я боролся с тем, что не так в этом коде.Так получилось, что форма не отправляется на эту кнопку.Кнопка имеет тип кнопки и не имеет тега формы.

$("#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>

Поэтому я хотел бы увидеть, где я ошибся.Я могу войти и увидеть вывод всякий раз, когда я помещаю console.log между if (userForm.valid) и userForm.submit ().

Но как только я помещаю его в userform.submit (), я не получаю никакого значения обратно.Мол, форма полностью не отправляется.Я не знаю, если это из-за того, как я сделал свой вызов Ajax .. Пожалуйста, помогите

Answer 1

Вы помещаете 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.