尝试调用 event.preventDefault() 后表单仍然提交答案

【问题标题】：Form still submits after trying to call event.preventDefault()尝试调用 event.preventDefault() 后表单仍然提交
【发布时间】：2017-10-16 09:34:17
【问题描述】：

您好，我正在尝试通过 ajax 发布我的表单数据。但我仍然想使用默认验证并显示来自 html 表单的默认消息。因此，表单显示表单的默认错误消息，但是当表单正确填写时，它会执行常规表单 submut，而不是执行 preventDefault 然后执行我的 ajax 方法。怎么不停地提交？不明白，谁能帮帮我，那太好了。

我的 html 表单：

<form id="add_address">
  <div class="form-group">
    <input class="form-control" type="text" name="address_address_name" required placeholder="Naam adres*" />
  </div>
  <div class="form-group">
    <input class="form-control" type="text" name="address_address" required placeholder="Straat + Nr*" />
  </div>
  <div class="form-group">
    <input class="form-control" type="text" name="address_zipcode" required placeholder="Postcode*" />
  </div>
  <div class="form-group">
    <input class="form-control" type="text" name="address_city" required placeholder="Plaats*" />
  </div>
  <div class="form-group">
    <input class="form-control" type="text" name="address_phone" placeholder="Telefoon" />
  </div>
  <div class="form-group">
    <input class="form-control" type="text" name="address_email" required placeholder="Email*" />
  </div>
  <button type="submit" class="btn btn-default right">Save</button>
</form>

我的javascript：

$('#add_address button').on('click',submit_form_address);

function submit_form_address(event){

   form = $('#add_address');
   console.log("yes here:"+ $(form)[0].checkValidity());

   if( $(form)[0].checkValidity() != false){
      event.preventDefault();
      add_address(form);
   }
}


function add_address(p_Form){

    var url = '/addresses';
    data = new FormData($(p_Form)[0]);

    $.ajax({
        url:url,
        method:'POST',
        data:data,
        cache: false,
        contentType: false,
        processData: false,
        success:success_add_address,
        error:error
    });
}

我的解决方案：我现在使用这种方式，这种方式对我来说可以使用 html 表单的默认验证并通过 ajax 进行自定义提交。

$(document).on('submit', '#add_address', function(e){
    add_address($(this));
    e.preventDefault(); 
});

【问题讨论】：

尝试处理submit事件而不是click事件。
或将<button type="submit"改为<button type="button"
$('#add_address').on('submit',function(e){ e.preventDefault(); });
请注意，您的代码正在成为The Horror of Implicit Globals 的牺牲品——声明您的变量（例如form）。这可能不是问题，尽管考虑一下，可能是您在某处有一个带有id="form"的元素，或者一个带有name="form"的表单字段...
@diavolic：如果调用preventDefault，则无需这样做。

标签： javascript jquery ajax forms

【解决方案1】：

    if( $(form)[0].checkValidity() != false){               
           add_address(form);
           event.preventDefault();
         }

// 或

    if( $(form)[0].checkValidity() != false){               
           add_address(form);
           return false;
         }

【讨论】：