一个提交按钮需要一种形式的输入字段，而其他按钮不需要？

Posted

技术标签:

【中文标题】一个提交按钮需要一种形式的输入字段，而其他按钮不需要？【英文标题】：Input fields in one form required for one submit button, but not for other? 【发布时间】：2016-10-27 23:48:49 【问题描述】：

如何区分我的提交按钮在一个表单中的两个单独的操作，而一个将数据保存到数据库中（按原样），另一个将表单作为有效请求提交，>>但是html5 本机验证（我在 HTML 表单中使用“必需”属性）？

我的表单有 66 个字段，我不想在 在提交后在 PHP 中验证它们（因为它太麻烦和耗时），或者在提交之前在 JS 中验证它们（因为我在 JS 中不像在 php 中那样敏捷），所以我在 HTML5 中使用“required”和“type”属性，这是一种非常方便且用途广泛的验证方式（除了旧浏览器）。 但是，当使用保存按钮但不使用“发送以提交”按钮时，我找不到绕过“必需”属性的简单方法。你能帮忙提出一个解决方案吗？我想首选的方式是一些 JS/jQuery 方式，因为在点击按钮之前我无法确定将使用哪个按钮（这样我就可以将字段设为必填）。

示例代码：

<form>
A: <input type="text" name="A" required />
B: <input type="text" name="B" required />
C: <input type="text" name="C" />
<input type="submit" name="save" value="Save"> <!--do not require anything-->
<input type="submit" name="send" value="Send  for submission"> <!-- require everything-->
</form>

当然，我的表单很大，因为它有 66 个字段，所以这里最好的解决方案可能是通用的和通用的。

【问题讨论】：

如果你不验证服务器端的数据你只是懒惰自找麻烦。客户端验证纯粹是为了增强用户体验，绝不能依赖。 我完全同意你的看法。随着时间的流逝，我只能背对着墙，需要在这里妥协......这不是最好的方法，但几乎不可行，尽快更新/升级。 【参考方案1】：

这样的事情可能会让你开始：

$('#sub1').click(function() 
  $('[name=A]').removeAttr('required');
  $('[name=B]').removeAttr('required');
  $('form').append('<input type="hidden" name="save" />');
  $('form').submit();
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  A: <input type="text" name="A" required /><br>
  B: <input type="text" name="B" required /><br>
  C: <input type="text" name="C" /><br>
  <input id="sub1" type="button" name="save" value="Save">
  <!--do not require anything-->
  <input type="submit" name="send" value="Send  for submission">
  <!-- require everything-->
</form>

【讨论】：

是的，确实如此。只需将我刚刚添加到答案中的&lt;script&gt; 标签添加即可。你可以把它放在你的 &lt;head&gt; 中，或者在结束 &lt;/body&gt; 标记之前 但是，正如我所说，我有 66 个字段，其中大约 40 个具有必需的属性。我想在文档之外运行一个可以完成工作的函数，而不是抓住文档。如何将整个表单传递给可以执行此操作的函数？啊，我说，我不是那么喜欢 JS... @JanDesta - 我发布了另一个可能回答这一点的答案。如果没有，请回复。【参考方案2】：

要在提交之前从所有标签中删除所需的属性，请将代码修改为：

$('#sub1').click(function() 
  $('[required]').removeAttr('required');
  $('form').append('<input type="hidden" name="save" />').submit();
);

jsFiddle Demo 展示它的工作原理

请注意，此答案还演示了链接 jQuery 方法：$(tag).append().submit()

【讨论】：

【参考方案3】：

我最终想出了这样的东西。 HTML：

<input type="submit" name="save" value="Save" onClick="removeRequired(this.form)">

JS（使用 jQuery）：

function removeRequired(form)
    $.each(form, function(key, value) 
        if ( value.hasAttribute("required"))
            value.removeAttribute("required");
        
    );

这是经过测试和工作的。它有一个很好的属性，我可以将函数保存在文件的其他位置，而不是抓住正在执行它的 php/html。 我想要的唯一改进（可能还有其他人会感兴趣）是消除 jQuery，因为它只用于浏览表单中的每个输入元素，这对于纯 JS 来说似乎很容易。但是我找不到一个简单的方法，并且用完了时间并在上面与 jQuery 一起使用。谢谢

【讨论】：

以上是关于一个提交按钮需要一种形式的输入字段，而其他按钮不需要？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 jquery 启用表单的提交按钮？

jquery bootstrap Validation：多个输入值的总和，如果不等于其他输入字段，则禁用提交按钮

如何在颤动中显示带有提交按钮和隐藏输入字段的html表单

提交正确答案的按钮？

带有两个提交按钮的 Django 表单。 . .一个需要字段，一个不需要

最初输入字段不是强制性的，但仍然禁用提交按钮？