Safari提交表单时不考虑其有效性，因此您不能依赖浏览器验证。我现在无法在Safari上测试，但这个解决方案应该可以工作。它基于您的代码，但不使用验证：
首先，在表单中设置novalidate属性

<form id="contactForm" novalidate>
  <input type="text" name="grado" id="grado" placeholder="Grado a cursar" required />
  <button type="submit">Send</button>
</form>

字符串
然后在提交事件处理程序中检查有效性，并根据需要显示/隐藏错误：

$("#contactForm").submit(function(event) {
  /* stop form from submitting normally */
  event.preventDefault();

  /* get some values from elements on the page: */
  var $form = $( this ),
      $submit = $form.find( 'button[type="submit"]' ),
      grado_value = $form.find( 'input[name="grado"]' ).val(),
      url = $form.attr('action');

  if (!event.target.checkValidity()) {
    // the form is not valid
    // show some nice errors, I'm just changing the button text here
    $submit.text('wrong');
    return false;
  }

  // send your data here, the form should be valid
  $submit.text('Enviado');
  $submit.attr("disabled", true);
});

型
备注：

• 您可以考虑使用验证库或插件来简化这项工作。
• 您可能需要添加类来样式化有效/无效输入，据我所知Safari不会呈现:valid和:invalid伪类。
• 也在服务器上执行验证。

你必须return: false;来阻止它发送。

范例：

$("#contactForm").submit(function (event) {
  var valid = false;
  // ... validation ... if data is valid, set valid to true
  if (!valid) return false;
});

字符串

首先，对每个表单元素的更改事件的验证将更容易。如果你想在submit中验证并形成一个submission（按顺序），那么我可以想象其中的逻辑。自己做。

has_error_first_name = false
has_error_last_name = false

function check_first_name() {
   if(form.first_name === ''){
      has_error_first_name = true
      return check_last_name(false)
   } else {
      has_error_first_name = false
      return check_last_name(true)
   }
}

function check_last_name(prev_validation) {
    if(form.last_name === ''){
      has_error_last_name = true
      return prev_validation && false
   } else {
      has_error_last_name = false
      return prev_validation && true
   }
}

function validate() {
    return check_first_name()
}  

if (validate()) {
      // do form submit using fetch or whatever
}

字符串