如何根据按下的按钮切换 HTML5 输入 "required" 功能
How to toggle the HTML5 input "required" function depending on which button is pressed
我的表单中有一个 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>
我的表单也有两个按钮。一个会发送“accepted”,另一个会发送“rejected”。我想更改我的表单,以便当用户单击“接受”按钮时,它将检查所需的输入是否为空。但是如果点击“拒绝”按钮,文本区域应该不需要,即使表单为空也会提交。
是否有任何解决方法?
方法一:自己处理需求验证
您需要从元素中删除“required”属性 - 浏览器实现了该要求,但您想自己处理它。
删除后,您需要使用 javascript 来处理提交。您可以向“已接受”按钮添加代码以检查文本区域是否有值,如果没有则阻止提交表单。
为此:
- 从文本区域中删除
required
属性
- 向所有必需元素添加 class,例如
<textarea class="required-on-accept">
- 添加一个 javascript 函数来检查所有带有 class 的元素,并检查它们是否有值。如果为空,return
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>
方法 2:删除单击“拒绝”按钮时的 required
属性
如果您仍然希望浏览器处理按下“拒绝”按钮时的验证 except,您仍然需要 javascript,但您可以做到像这样:
- 向所有必需元素添加 class,例如
<textarea class="required-on-accept">
- 添加一个 javascript 函数来检查所有带有 class 的元素,并删除
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>
我的表单中有一个 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>
我的表单也有两个按钮。一个会发送“accepted”,另一个会发送“rejected”。我想更改我的表单,以便当用户单击“接受”按钮时,它将检查所需的输入是否为空。但是如果点击“拒绝”按钮,文本区域应该不需要,即使表单为空也会提交。
是否有任何解决方法?
方法一:自己处理需求验证
您需要从元素中删除“required”属性 - 浏览器实现了该要求,但您想自己处理它。
删除后,您需要使用 javascript 来处理提交。您可以向“已接受”按钮添加代码以检查文本区域是否有值,如果没有则阻止提交表单。
为此:
- 从文本区域中删除
required
属性 - 向所有必需元素添加 class,例如
<textarea class="required-on-accept">
- 添加一个 javascript 函数来检查所有带有 class 的元素,并检查它们是否有值。如果为空,return
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>
方法 2:删除单击“拒绝”按钮时的 required
属性
如果您仍然希望浏览器处理按下“拒绝”按钮时的验证 except,您仍然需要 javascript,但您可以做到像这样:
- 向所有必需元素添加 class,例如
<textarea class="required-on-accept">
- 添加一个 javascript 函数来检查所有带有 class 的元素,并删除
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>