提交前按 jquery 验证表单

Question

在表单中我有 2 个按钮：

    <button type="submit">Submit</button>
    <button type="submit" name="rdraft" value="1">Save to drafts</button>

第一个是实际发布内容，第二个只是将其保存到草稿中。在表单提交上，我使用 Jquery:

验证表单字段

    $('#form').submit(function(e) {
    //validation scripts
    });

如何仅在单击第一个按钮时验证我的表单，如果是草稿则跳过验证？

Answer 1

提交按钮可以使用onClick事件

function validate(e){
  var formData = new FormData(document.forms.myForm);
  const jsonFormData = Object.fromEntries(formData);
  if(!jsonFormData['name']){
    event.preventDefault();
    alert("Please enter name");
  }
}

<form name="myForm">
<input type="text" name="name" />
<button type="submit" onclick="return validate();">Submit</button>
<button type="submit" name="rdraft" value="1">Save to drafts</button>
</form>

Answer 2

另一个解决方案是使用 submitter

$('#form').submit(function(e) {
  const submitterValue = e.originalEvent.submitter.value;
  if(submitterValue!=1){
     // do validation
     e.preventDefault();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form">
  <input type="text" name="name" />
  <button type="submit">Submit</button>
  <button type="submit" name="rdraft" value="1">Save to drafts</button>
</form>

提交前按 jquery 验证表单

Validate form by jquery before submitting

forms

validation

jquery