html表单提交中“required”关键字的错误处理答案

【问题标题】：Error handling for "required" keyword in html form submissionhtml表单提交中“required”关键字的错误处理
【发布时间】：2015-09-11 05:13:01
【问题描述】：

我现在正在做出一个艰难的设计决定。我在一个表单中有一堆空白，在一个 html 页面中有两个按钮，这两个按钮用于在数据库中“添加”和“删除”数据（假设我有一种方法可以从数据库中检索数据并填充删除前的表格）。我想建立一个错误处理机制，这样 1) 必须在提交前填写必填字段，并且 2) 空表单（因此记录）不能被删除

我的代码类似于以下：

<form id="fm" method="POST">
  <input name="a" required>
  <input name="b" required>
  <!-- let's say I have 20 other blank fields -->
  <button id="add"><input name="btn">Add</button>
  <button id="delete"><input name="btn">Delete</button>
</form>

在我的 jquery 中，我有：

$("#fm").submit( function() {
  return false;
});
$("#sbmbtn").click( function() {
  $.post(............)
  //and other magic tricks
});

如果我将 .click 函数中的所有内容放入 .submit 函数中，javascript 将自动强制在提交之前必须填写“必填”字段。但是，如果我这样做，另一个按钮的行为会很奇怪，因为两个按钮都在同一个表单中，单击其中一个按钮都会触发表单提交，这是不可取的。

长话短说，我可能不会对架构进行太多更改，我可以添加或调整什么以确保在提交之前检查必填字段？

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

提交前必填项，提交前运行此功能

function validate() {
     var requiredFields = $('#fm input').filter('[required]');
     var valid = true;

     $.each(requiredFields, function(index, value){
         if (value.value.length < 1) {
            valid = false;
         }
     });

     return valid;
}

然后使用 validate 的返回值确保在运行提交函数之前填写所有字段。

如果表单为空，只需禁用删除按钮

编辑：但如果用户禁用 JavaScript，这一切都将毫无用处，因此您还必须进行服务器端验证。

【讨论】：