如何根据按下的按钮切换 HTML5 输入“必需”功能

Posted 2023-03-12

【中文标题】如何根据按下的按钮切换 HTML5 输入“必需”功能

【英文标题】：How to toggle the HTML5 input "required" function depending on which button is pressed

【发布时间】：2020-08-26 17:32:16

【问题描述】：

我的表单中有一个 textarea 输入字段，我正在使用 html5 required 属性：

<textarea class="form-control text-secondary mb-3" rows="4" name="audit_req_comment_decision" type="text" value="<?php echo htmlentities($audits['audit_req_comment_decision']); ?>" required></textarea>

<button type="submit" class="btn btn-danger" name="accepted">Accepted</button>
<button type="submit" class="btn btn-danger ml-auto" name="rejected">Rejected</button>

我的表单也有两个按钮。一种会发送“已接受”，另一种会发送“拒绝”。我想更改我的表单，以便当用户单击“接受”按钮时，它将检查所需的输入是否为空。但是如果点击了“拒绝”按钮，文本区域应该是不需要的，即使是空的表单也会提交。

有没有可用的解决方法？

【参考方案1】：

方法一：自己处理需求验证

您需要从元素中删除“必需”属性 - 浏览器实现了该要求，但您想自己处理。

删除后，您需要使用 javascript 来处理提交。您可以将代码添加到“接受”按钮，以检查文本区域是否有值，如果没有，则阻止提交表单。

为此：

从 textarea 中移除 required 属性 为所有必需的元素添加一个类，例如<textarea class="required-on-accept"> 添加一个 javascript 函数来检查您的类中的所有元素，并检查它们是否有值。如果为空，则返回false 以防止表单被提交 在单击按钮时调用此函数，方法是将onclick 添加到按钮，如下所示：<button type="submit" onclick="return check_required();">

查看一个工作示例：

function check_required() 
  /* check all elements with the class required-on-accept */
  var elements = document.getElementsByClassName("required-on-accept");
  for (var i = 0; i < elements.length; i++) 
      /*if any element is empty, return false to prevent the form being submitted */
      if (elements[i].value=="")
        console.log(" required value not entered!");
        return false;
      
  
  return true;

<form id="my-form">
  <textarea class="form-control text-secondary mb-3 required-on-accept" rows="4" name="audit_req_comment_decision" type="text" value="123"></textarea>

  <button type="submit" onclick="return check_required();" class="btn btn-danger" name="accepted">Accepted</button>
  <button type="submit" class="btn btn-danger ml-auto" name="rejected">Rejected</button>
</form>

方法二：在点击“拒绝”按钮时删除required属性

如果您仍然希望浏览器在按下“拒绝”按钮时处理验证除了，您仍然需要 javascript，但您可以这样做：

为所有必需的元素添加一个类，例如<textarea class="required-on-accept"> 添加一个javascript函数来检查你的类的所有元素，并删除required属性 单击“拒绝”按钮时调用此函数，方法是在按钮上添加onclick，如下所示：<button type="submit" onclick="return check_not_required();">

如果单击“接受”按钮，required 属性将保留，因此如果单击该按钮，浏览器仍会阻止提交表单。

请参阅下面的工作 -

function check_not_required() 
  /* check all elements with the class required-on-accept */
  var elements = document.getElementsByClassName("required-on-accept");
  for (var i = 0; i < elements.length; i++) 
    /* remove the "required" attribute from the element */
    elements[i].removeAttribute("required");
  
  /* Tell the browser to submit the form - 
     the required elements are no longer required, 
     so the browser will not stop the submission if they're empty */
  return true;

<form id="my-form">
  <textarea class="form-control text-secondary mb-3 required-on-accept" rows="4" name="audit_req_comment_decision" type="text" value="123" required></textarea>

  <button type="submit" class="btn btn-danger" name="accepted">Accepted</button>
  <button type="submit" onclick="return check_not_required();" class="btn btn-danger ml-auto" name="rejected">Rejected</button>
</form>

【讨论】：

亲爱的 FluffyKitten，非常感谢您！它运行良好，但只有消息“未输入所需值！”没有出现...

@MischaMilivojeBakic 很高兴为您提供帮助。我虽然您想自己处理验证，但如果您仍想使用浏览器验证，我添加了另一种方法来代替 - 请参阅我更新的答案中的方法 2！

这正是我所需要的。非常好！我喜欢它，因为它仍然是相同的通知标准。所以用户不会得到新的通知设计！对我来说完美的工作解决方案。非常感谢！