提交前通过jquery验证表单答案

【问题标题】：Validate form by jquery before submitting提交前通过jquery验证表单
【发布时间】：2021-11-15 10:45:25
【问题描述】：

在表单中我有 2 个按钮：

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

第一个实际上是发布内容，第二个只是将其保存到草稿。在提交表单时，我使用 Jquery 验证表单字段：

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

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

【问题讨论】：

标签： jquery forms validation

【解决方案1】：

另一种解决方案是使用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>

【讨论】：

【解决方案2】：

提交按钮可以使用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>

【讨论】：