preventDefault()和stopImmediatePropagation无法正常工作 [英] preventDefault() and stopImmediatePropagation not working

问题描述

我有一种使用Jquery和Ajax将数据发送到服务器端的表单，但是即使我在函数中应用了preventDefault()和stopImmediatePropagation，数据也提交了两次.

I have a form which use Jquery and Ajax to send data to the server side, but data submitting twice even though I have applied preventDefault() and stopImmediatePropagation in my function.

这是我的表格

<form id="commentForm" method="post" enctype="multipart/form-data" class="registerForm">

  <div id="rootwizard">
    <ul class="nav nav-pills">
      <li class="nav-item m-t-15 bv-tab-error">
        <a class="nav-link active" href="#tab1" data-toggle="tab" aria-expanded="true">
          <span class="userprofile_tab1">1</span></a>
      </li>
      <li class="nav-item m-t-15">
        <a class="nav-link" href="#tab2" data-toggle="tab">
          <span class="userprofile_tab2">2</span></a>
      </li>
      <li class="nav-item m-t-15">
        <a class="nav-link" href="#tab3" data-toggle="tab"><span>3</span>Finish</a>
      </li>
    </ul>
    <div class="tab-content m-t-20">
      <div class="tab-pane active" id="tab1" aria-expanded="true">
        <div class="form-group has-error">
          <label for="userName" class="col-form-label">Full Name *</label>
          <input id="userName" name="name" type="text" placeholder="Enter your name" class="form-control required" data-bv-field="name">
          <small class="help-block" data-bv-validator="notEmpty" data-bv-for="name" data-bv-result="INVALID" style="">The Name is required</small></div>
        <div class="form-group ">
          <label for="email" class="col-form-label">Email
            (optional)</label>
          <input id="email" name="email" placeholder="Enter your Email" type="text" class="form-control email" data-bv-field="email">
        </div>
        <div class="form-group">
          <label>Phone number *</label>
          <input type="text" class="form-control" id="phone1" name="phone1" placeholder="0756000000" data-bv-field="phone1">
          <small class="help-block" data-bv-validator="notEmpty" data-bv-for="phone1" data-bv-result="NOT_VALIDATED" style="display: none;">The phone number is required</small><small class="help-block" data-bv-validator="regexp" data-bv-for="phone1" data-bv-result="NOT_VALIDATED" style="display: none;">Enter valid phone number</small>
        </div>
        <div class="form-group">
          <label>Other number (optional)</label>
          <input type="text" class="form-control" id="phone2" name="phone2" placeholder="0789000000" data-bv-field="phone2">

        </div>
        <div class="form-group has-error">
          <label for="password" class="col-form-label">Password
            *</label>
          <input id="password" name="password" type="password" placeholder="Enter your password" class="form-control required" data-bv-field="password">
          <small class="help-block" data-bv-validator="notEmpty" data-bv-for="password" data-bv-result="INVALID" style="">The password is required</small>
        </div>

        <ul class="pager wizard pager_a_cursor_pointer">
          <li class="previous disabled">
            <a><i class="fa fa-long-arrow-left"></i>
              Previous</a>
          </li>
          <li class="next">
            <a>Next <i class="fa fa-long-arrow-right"></i>
            </a>
          </li>
          <li class="next finish hidden" style="display: none;">
            <a>Finish</a>
          </li>
        </ul>
      </div>
      <div class="tab-pane" id="tab2">

        <div class="form-group">
          <label for="address">Address *</label>
          <input id="address" name="address" type="text" class="form-control" data-bv-field="address">
          <small class="help-block" data-bv-validator="notEmpty" data-bv-for="address" data-bv-result="NOT_VALIDATED" style="display: none;">The address is required </small>
        </div>
        <div class="form-group">
          <label for="gender">Package</label>
          <select class="custom-select form-control" id="package" name="package" title="Select an package ..">
            <option>Select</option>
            <option value="Individual & Family">Individual & Family</option>
            <option value="Corporates">Corporates</option>
            <option value="Religious">Religious</option>
          </select>
        </div>

        <div class="form-group">

          <div class="col-12 col-lg-6 text-center text-lg-left">
            <div class="fileinput fileinput-new" data-provides="fileinput">
              <div class="fileinput-new img-thumbnail text-center">
                <img src="img/h.png" data-src="img/h.png" alt="not found">
              </div>
              <div class="fileinput-preview fileinput-exists img-thumbnail">

              </div>
              <div class="m-t-20 text-center">
                <span class="btn btn-primary btn-file">
                  <span class="fileinput-new">Select image</span>
                  <span class="fileinput-exists">Change</span>
                  <input type="file" id="photo" name="photo">
                </span>
                <a href="#" class="btn btn-warning fileinput-exists" data-dismiss="fileinput">Remove</a>
              </div>
            </div>
          </div>
        </div>


        <ul class="pager wizard pager_a_cursor_pointer">
          <li class="previous disabled">
            <a><i class="fa fa-long-arrow-left"></i>
              Previous</a>
          </li>
          <li class="next">
            <a>Next <i class="fa fa-long-arrow-right"></i>
            </a>
          </li>
          <li class="next finish hidden" style="display: none;">
            <a>Finish</a>
          </li>
        </ul>
      </div>
      <div class="tab-pane" id="tab3">

        <h5>Referee details</h5>
        <hr>
        <div class="form-group has-error">
          <label for="referee_name" class="col-form-label">Referee Name *</label>
          <input id="referee_name" name="referee_name" type="text" placeholder="Enter your name" class="form-control required" data-bv-field="referee_name">
          <small class="help-block" data-bv-validator="notEmpty" data-bv-for="referee_name" data-bv-result="INVALID" style="">The Referee Name is required</small>
        </div>
        <div class="form-group ">
          <label for="referee_email" class="col-form-label">Referee Email
            (optional)</label>
          <input id="referee_email" name="referee_email" placeholder="Enter your Email" type="text" class="form-control email" data-bv-field="referee_email">
        </div>
        <div class="form-group">
          <label>Referee Phone number *</label>
          <input type="text" class="form-control" id="rphone" name="rphone" placeholder="0756000000" data-bv-field="rphone">
          <small class="help-block" data-bv-validator="notEmpty" data-bv-for="rphone" data-bv-result="NOT_VALIDATED" style="display: none;">The referee phone number is required</small><small class="help-block" data-bv-validator="regexp" data-bv-for="rphone" data-bv-result="NOT_VALIDATED" style="display: none;">Enter valid referee phone number</small>
        </div>

        <div class="form-group">
          <span>Terms and Conditions *</span>
          <br>
          <label class="custom-control custom-checkbox wizard_label_block">
            <input type="checkbox" id="acceptTerms" name="acceptTerms" class="custom-control-input" data-bv-field="acceptTerms">
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description custom_control_description_color">I agree with the Terms and Conditions.</span>
          </label>

          <small class="help-block" data-bv-validator="notEmpty" data-bv-for="acceptTerms" data-bv-result="NOT_VALIDATED" style="display: none;">The checkbox must be checked</small></div>
        <ul class="pager wizard pager_a_cursor_pointer">
          <li class="previous disabled">
            <a><i class="fa fa-long-arrow-left"></i>
              Previous</a>
          </li>
          <li class="next">
            <a>Next <i class="fa fa-long-arrow-right"></i>
            </a>
          </li>
          <li >

            <input type="submit"  class="btn btn-success pull-right" value="Submit">
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="form-group row">
    <div class="col-md-12">

      <button type="reset" style="width: 100%" class="btn btn-danger">Reset</button>
    </div>


  </div>
  <div class="row">
    <div class="col-sm-9">
      <label class="col-form-label">Already have an account?</label> <a href="/" class="text-primary login_hover"><b>Log In</b></a>
    </div>
  </div>
</form>

这是我的jQuery:

This is my jQuery:

$(document).ready(function() {
  $("#commentForm").submit(function(e) {
    e.stopImmediatePropagation();
    e.preventDefault();

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    }),

    $.ajax({
      url: '/create_member',
      type: 'POST',
      data: new FormData(this),
      processData: false,
      contentType: false,
      beforeSend: function() {
        $("#register").text("Processing....")
      },
      success: function(data) {
        if (data.message) {
          swal({
            title: "Success",

            text: "" + data.message,
            icon: "success",
          });
        } else if (data.error) {
          swal({
            title: "Sorry",

            text: "" + data.error,
            icon: "error",
          });
        }
        $("#commentForm")[0].reset();
        $("#register").text("Register")
      }
    });
    return false;
  })
})

推荐答案

我看到您有很多验证属性，所以您可能正在使用JQuery validate插件，submit已在内部实现，因此您不能添加其他类似的东西

I saw you have many validation attributes, so probably you are using JQuery validate plugin, submit is already implemented inside, so you cannot add another one like that.

这是官方文档: https://jqueryvalidation.org/validate/

您可以尝试以下解决方案: 为什么要提交在jQuery Validate SubmitHandler触发之前两次?

you can try this solution: Why do you have to submit twice before jQuery Validate submitHandler is triggered?

或这一个: Jquery Validate插件可防止在验证时重复提交

这篇关于preventDefault()和stopImmediatePropagation无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！