如何使输入类型标记的必需属性仅适用于特定按钮？答案

【问题标题】：how to make required attribute of input type tag work only for specific buttons?如何使输入类型标记的必需属性仅适用于特定按钮？
【发布时间】：2016-04-27 19:57:33
【问题描述】：

我在 html 中制作了一个带有 2 个输入字段 first name 和 last name 的表单，并将 required 属性添加到输入类型标记。我还制作了两个按钮Submit 和View。如果两个字段都为空，则显示please fill out this field attribute 消息。当我单击提交按钮时，我的表单中的数据使用 php 进入我的 sql 数据库，这很好。但是当我单击查看按钮时，我只想显示一条消息而不填写 first name 和 last name 文本区域。如何使用查看按钮执行此操作？

tl;dr：我希望输入类型标记的“必需”属性仅适用于提交按钮，而不适用于查看按钮。我该怎么做？我将 HTML 用于表单，CSS 用于样式，PHP 用于 sql 条目。谢谢。

【问题讨论】：

“查看”按钮的类型是什么，我假设“提交”的类型是提交
是的，是提交类型的。

标签： php html forms

【解决方案1】：

您可以使用 JavaScript 执行类似的操作，例如通过为您的每个输入提供一个 ID，然后您可以检测何时单击查看按钮并删除“必需”属性。

这是一个 JQuery 示例：

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$( document ).ready(function() {
    $("#view").click(function() {
        $("#test1").removeAttr("required");
        $("#test2").removeAttr("required");
    });
});
</script>
</head>
<body>
  <form action="example.php" method="POST">
  First name:<br />
  <input type="text" name="firstname" id="test1" required="required"><br />
  Last name:<br />
  <input type="text" name="lastname" id="test2" required="required"><br />
  <input type="submit" value="Submit"> | <input type="submit" id="view" value="View">
</form> 
</body>
</html>

JSFiddle

【讨论】：

谢谢，但有没有办法在没有 JavaScript 的情况下做到这一点？
@shraey.chikker 不幸的是，required 属性是 DOM（文档对象模型）的一部分。 JavaScript 可以操作 DOM，但 CSS 不能。 PHP 也可以操作 DOM，但它是一种服务器端语言，而不是您需要的客户端语言。

【解决方案2】：

您还可以阻止点击事件的默认操作。在这种情况下，代码如下所示：

$(document).ready(function() {
  $("#view").click(function() {
    return false;
  }); 
});

或者使用 preventDefault:

$(document).ready(function() {
  $("#view").click(function(e) {
    e.preventDefault();
  }); 
});

两者似乎都可以正常工作。 #view（如上述答案）是您要防止触发所需属性的按钮的 ID。

【讨论】：