如何根据表单提交按钮动态切换必填字段校验规则

核心逻辑 #

通过监听两个提交按钮的点击事件，动态切换表单字段的required校验属性，原生HTML表单校验会自动识别该属性完成校验逻辑，无需额外引入校验插件。

具体操作步骤 #

1. 先修改原有HTML中Name字段的代码，移除写死的required属性，改为JS动态控制更灵活：

<!-- 修改前 -->
<input type="text" class="form-control" id="Name" name="Name" placeholder="Name" required >
<!-- 修改后 -->
<input type="text" class="form-control" id="Name" name="Name" placeholder="Name" >

2. 如果你还未引入jQuery，先在所有JS脚本之前添加引入代码：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

3. 在现有HTML的</body>结束标签前添加如下JS控制代码：

<script>
// 保存草稿按钮点击事件
$('input[name="form_draft"]').on('click', function() {
  // 先清除所有字段的必填属性
  $('input, select').removeAttr('required');
  // 仅保留Name字段为必填
  $('#Name').attr('required', true);
});

// 保存最终表单按钮点击事件
$('input[name="form_new"]').on('click', function() {
  // 先清除所有字段的必填属性
  $('input, select').removeAttr('required');
  // 设置除Text外的所有字段为必填
  $('input[name="types"]').attr('required', true); // 单选组只需给同name的任意一个加required即可生效
  $('#Number, #Number2, #Name, #select').attr('required', true);
});
</script>

效果说明 #

• 点击保存草稿：仅校验Name字段是否填写，其余字段均不做强制校验
• 点击保存最终表单：校验单选类型、Number、Number2、Name、下拉选择框是否填写，Text字段可选
• 原生校验提示完全兼容现有Bootstrap样式，无需额外调整样式

内容的提问来源于stack exchange，提问作者nzoli