Question

您好，我试图通过ajax发布我的表单数据。但是我仍然希望使用默认验证并显示来自html表单的默认消息。因此，表单显示表单的默认错误消息，但是当表单正确填充时，它会执行常规表单子模式而不是执行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();
         }

// OR

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

在尝试调用event.preventDefault（）

1 个答案: