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>

我正在尝试检查商务舱座位数是否为正。如您所见，我添加了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页面具有多个“命名空间”，例如表单，模式，数据表和制表符，那么**:id位将为您提供帮助。这些命名空间为ID添加了前缀，**:id允许您查找id，无论前缀是什么。

b：modal形式的验证不起作用

1 个答案: