preventDefault 在 Safari 中的表单提交中不起作用

Question

我正在尝试让 Safari 验证我的表单并在未填写必填字段时停止提交。我目前有以下提交功能。

$('#qtrAuditform').on('submit', function(event) {
  event.preventDefault();
  var uagent = navigator.userAgent.toLowerCase();
  if (/safari/.test(uagent) && !/chrome/.test(uagent)) {
    //If required attribute is not supported or browser is Safari (Safari thinks that it has this attribute, but it does not work), then check all fields that has required attribute
    $("#qtrAuditform [required]").each(function(index) {
      if (!$(this).val()) {
        //If at least one required value is empty, then ask to fill all required fields.
        alert("Please fill all required fields.");
        event.preventDefault();
        return false;
      }
    });
  }
  var $form = $(this),
    data = $form.serialize();
  var url = 'http://localhost:8888/datatest';
  $.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: function() {
      alert('Your form has been successfully submitted!');
    },
    fail: function() {
      alert('something went wrong...try again');
    }
  });
});

我收到请填写必填字段的提醒，但紧接着我又收到表单已提交的提醒。我怎样才能不提交表单，同时仍然填写需要填写的字段？

Answer 1

整个事件应该立即 return false。

    $('#qtrAuditform').on('submit', function(event) {
  event.preventDefault();
  var uagent = navigator.userAgent.toLowerCase();
  if (/safari/.test(uagent) && !/chrome/.test(uagent)) {
    //If required attribute is not supported or browser is Safari (Safari thinks that it has this attribute, but it does not work), then check all fields that has required attribute
    $("#qtrAuditform [required]").each(function(index) {
      if (!$(this).val()) {
        //If at least one required value is empty, then ask to fill all required fields.
        alert("Please fill all required fields.");
        event.preventDefault();
        return false;
      }
    });
  }
  var $form = $(this),
    data = $form.serialize();
  var url = 'http://localhost:8888/datatest';
  $.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: function() {
      alert('Your form has been successfully submitted!');
    },
    fail: function() {
      alert('something went wrong...try again');
    }
  }); 
 //Return false immediately
 return false;
});

希望对您有所帮助。

Answer 2

这就是我现在拥有的，有效。

$('#qtrAuditform').on('submit',function(event){
    //event.preventDefault();
    var uagent = navigator.userAgent.toLowerCase();
   if(/safari/.test(uagent) && !/chrome/.test(uagent)) {
   //If required attribute is not supported or browser is Safari (Safari thinks that it has this attribute, but it does not work), then check all fields that has required attribute
   $("#qtrAuditform [required]").each(function(index) {
    if (!$(this).val()) {
     //If at least one required value is empty, then ask to fill all required fields.
     alert("Please fill all required fields.");
     //event.preventDefault();
     return false;
    }
   });
   return false;
  }
    var $form = $(this),
    data = $form.serialize();
    var url = 'http://localhost:8888/datatest';
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        success: function(){
            //window.location = "http://www.google.com";
   alert('Your form has been successfully submitted!');
    
        },
        fail:function(){
            alert('something went wrong...try again');
        }
    });
 return false;
});

唯一没有正确完成的是 return 表单已在 Safari 中正确提交的警告。它确实 return 在其他浏览器中发出警报。

preventDefault 在 Safari 中的表单提交中不起作用

preventDefault not working in form submit in Safari

javascript

html

forms

safari

preventdefault