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

编程问答 2022-08-14

问题描述

我在表单中有一个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：自己处理需求验证

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

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

为此：

  1. 从文本区域中删除required属性
  2. 将类添加到所有必需的元素，例如<textarea class="required-on-accept">
  3. 添加一个javascript函数来检查类中的所有元素，并检查它们是否具有值。如果它们为空，请返回false以防止表单被提交
  4. 单击按钮时，通过如下方式将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>

方法2：点击“已拒绝”按钮，删除required属性

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

  1. 将类添加到所有必需的元素，例如<textarea class="required-on-accept">
  2. 添加一个javascript函数来检查类中的所有元素，并删除required属性
  3. 在单击“拒绝”按钮时，通过如下方式将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>

formshtmlinputjavascriptrequired