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

Question

嗨，我正在尝试通过 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(); 
});

Answer 1

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

// 或者

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