b:modal 表单验证无效

Question

我正在尝试验证模态形式 (JSF/Bootsfaces) 并在输入文本不正确时阻止它被保存。出于某种原因，我忽略了它不起作用，这里是 JSF 代码：

    <b:modal id="creation"
             title="#{msgs['page.manageFlights.addingNew']}"
             styleClass="formValidationModalClass"
             closeOnEscape="false"
             backdrop="false"
             closable="false">

        <b:form id="createModal">
            <b:selectOneMenu
                    value="#{flightBean.currentFlight.journey}"
                    label="#{msgs['page.manageFlights.findAllJourneys']}"
                    required="true"
                    requiredMessage="Please select a journey"
                    large-screen="full-width">
                <f:selectItems value="#{journeyBean.findAllJourneys()}" var="journey" itemValue="#{journey}" itemLabel="#{journey.departureLocation} -> #{journey.arrivalLocation}" />

            </b:selectOneMenu>
            <b:dateTimePicker
                    value="#{flightBean.currentFlight.departureDate}"
                    label="#{msgs['page.manageFlights.departureDate']}"
                    required="true"
                    requiredMessage="Please enter a date and time"
                    large-screen="full-width">
            </b:dateTimePicker>

            <b:dateTimePicker
                    value="#{flightBean.currentFlight.arrivalDate}"
                    label="#{msgs['page.manageFlights.arrivalDate']}"
                    required="true"
                    requiredMessage="Please enter a date and time"
                    large-screen="full-width">
            </b:dateTimePicker>

            <b:inputText     value="#{flightBean.currentFlight.numberOfBusinessClassSeats}"
                             label="#{msgs['page.manageFlights.numberOfBusinessClassSeats']}"
                             required="true"
                             requiredMessage="The number of seats must be positive"
                             large-screen="full-width">
                <f:validateLongRange minimum = "1" maximum = "2000" />
            </b:inputText>
            <b:inputText
                    value="#{flightBean.currentFlight.numberOfEconomyClassSeats}"
                    label="#{msgs['page.manageFlights.numberOfEconomyClassSeats']}"
                    required="true"
                    requiredMessage="Please enter a number"
                    validatorMessage="The number of seats must be positive"
                    large-screen="full-width">
            </b:inputText>
            <br/>
            <b:row>
                <b:column>
                    <b:commandButton
                            largeScreen="half"
                            value="#{msgs['cancel.button']}"
                            dismiss="modal"
                            action="#{flightBean.resetCurrentFlight()}"
                            oncomplete="$('#creation').modal('hide')"
                    />
                    <b:commandButton
                            largeScreen="half"
                            dismiss="modal"
                            update="@(#dataTable)"
                            value="#{msgs['save.button']}" look="success"
                            action="#{flightBean.addFlight(flightBean.currentFlight)}"
                            oncomplete="if(!validationFailed) { $('#creation').modal('hide')};">
                    </b:commandButton>
                </b:column>
            </b:row>
            <b:fetchBeanInfos/>
            <b:messages/>
        </b:form>
    </b:modal>

我正在尝试检查业务 class 座位数是否为正数。如您所见，我添加了 fetchbeaninfos、validateLongRange 和 oncomplete。

Answer 1

<b:fetchBeanInfos> 和 validationFailed 仅在 AJAX 请求后有效。您需要将输入发送到服务器，在那里进行验证，只有当响应被发送回客户端时，validationFailed 才会更新。

我的建议是使用简单的 JavaScript 来显示错误消息并禁用按钮。

但是，如果您更喜欢使用服务器端验证，请执行以下操作：

向您的 bean 添加一个空的 validateInput() 方法。它不需要任何实现；它必须在那里，以便它可以被 JSF AJAX 调用调用。
将 id 添加到 <b:fetchBeanInfos>。

向每个输入字段添加一个 AJAX 更改侦听器。根据输入字段的类型，您可能需要不同的监听器（onblur、onchange 等），但总体思路是这样的：

<b:inputText
            onblur="ajax:flightBean.validateInput()"
            update="**:fetchBeansId"
            value="..."
            label="..."
            required="true"
            requiredMessage="..."
            validatorMessage="...">
</b:inputText>
<b:fetchBeanInfos id="fetchBeansId"/>

如果您的 JSF 页面有多个 "namespaces"，例如表单、模式、数据表和选项卡，**:id 位可以帮助您。这些命名空间给id加了前缀，**:id不管前缀是什么都可以找到id。

b:modal 表单验证无效

Validation of a b:modal form is not working

jsf

bootsfaces