如何根据按下的按钮切换HTML5输入"required"功能

Question

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

<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>

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

是否有任何可用的解决方法？

Answer 1

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

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

删除它后，您需要使用 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>