根据复选框值有条件地进行输入 [英] Conditionally make inputs required depending on checkbox value

问题描述

在我的JSF页面上，我有一个HTML输入复选框，允许用户选择是否需要礼物，并且复选框下的< div> 信息将仅在复选框被选中时显示。一旦复选框被选中，用户将需要选择一个选项（从下拉菜单中，下拉菜单的初始值= null）;

On my JSF page, I have a HTML input checkbox where allows users to choose if they want the gift or not, and the <div> section under the checkbox information will only be displayed if the checkbox is checked. Once the checkbox is checked, users will be required to select an option (from a dropdown menu, initial value of dropdown menu = null); however, the selection is not required if the checkbox is not checked.

因此，这里有两个条件：

So, here comes two conditions:

A。复选框处于选中状态（== div视图播放）

A. Checkbox is checked ( == div view is played)

1. 用户选择一个选项 - > okay



2. 用户不要选择任何东西 - >我想显示所需的消息，这是我做了：

1. user pick an option -> okay

2. user do not select anything -> I want the required message to be displayed, and this is what I have done:

<p:message style="margin: 10px" id="messages7" for="npsScoreSupport" />
<h:selectOneMenu id="npsScoreSupport" value="#{npsBean.supportScore}" required="true" requiredMessage="Please select an option">
    <f:selectItems value="#{npsBean.ratingPickList}" />
</h:selectOneMenu>

复选框未选中（== div视图已隐藏）

B. Checkbox is unchecked (== div view is hidden)

1. 用户不要选择任何内容 - >可以，但页面仍然需要用户选择一个选项，因为我有required =true。

由于我需要requireMessage来确保在复选框被选中时选择一个选项，我想知道是否可以requireMessage条件基于复选框的状态？
（当选中复选框时需要，如果未选中则不需要）
任何建议？

Since I need the requireMessage to make sure an option is picked when the checkbox is checked, I am wondering if it is possible to make the requireMessage conditional based on the state of checkbox? (require when checkbox is checked, and not required when unchecked) any suggestion?

=========== =更新====================

============updated======================

现在我更新了我的复选框并将其连接JAVA类中的函数（默认为布尔变量check = true）

So now I have updated my checkbox and connects it with a function in JAVA class (boolean variable check = true as default)

<h:selectBooleanCheckbox class="someClass" value="#{someBean.check}" />

这里是我的选择器

<h:selectOneMenu id="OptSelector" value="#{someBean.Opt}" required="#{someBean.check}" requiredMessage="Please select and option">
                                                <f:selectItems value="#{npsBean.OptPickList}" />

提交失败，即使取消选中此复选框，似乎布尔检查从不更改。任何人知道为什么？

The submission failed even when the checkbox is unchecked, it seems like the boolean check never changes. Anyone know why?

推荐答案

只要让菜单的必需被检查。您可以通过将 binding 属性绑定到视图来实现它，这将使它最终在 UIInput 实例，它又具有 getValue（）方法返回提交/转换/验证的值。

Just let the required attribute of the menu check if the checkbox is checked. You can do it by binding the physical checkbox component to the view by binding attribute, which would make it to end up in an UIInput instance which in turn has getValue() method returning the submitted/converted/validated value.

<h:selectBooleanCheckbox binding="#{checkbox}" ... />
<h:selectOneMenu ... required="#{checkbox.value}" />

（注意：代码是原样完成的， / strong>需要将其绑定到一个bean属性！）

(note: the code is complete as-is, you do not need to bind it to a bean property!)

请注意，这并不严格地有条件地显示消息它只是有条件地根据需要验证输入。

Note that this doesn't strictly "conditionally display the message" as you explicitly asked. It just conditionally validates the input as required. Whether the message is being displayed or not is merely a consequence.

• JSF中的绑定属性如何工作

• how binding attribute in JSF works

更新：根据您尝试检查 ; h：selectBooleanCheckbox value> 相反，这将不工作，因为该值仅在更新模型值阶段期间更新，即在验证阶段之后 $ c>必需属性。

Update: as per your attempt to check the <h:selectBooleanCheckbox value> instead, this won't work as this value is only updated during update model values phase, which is after the validations phase when the required attribute is to be checked.

这篇关于根据复选框值有条件地进行输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！