Question

我试图让我的JSF Register表单使用Bootstrap样式。一切正常，但我不知道如何将我的验证消息集成到我的表单中。如果我渲染此代码，则忽略验证消息。我不知道为什么？任何想法我怎么能让他们可见，也许他们的样式好看？非常感谢您的帮助！

        <!-- Register Form -->
        <h:form role="form" style="width: 400px; margin: 0 auto;">
            <!--  User name -->
            <div class="required-field-block">
                <h:outputLabel for="name" value="Benutzername"></h:outputLabel>
                <h:inputText id="name" value="#{userBean.user.name}"
                    validatorMessage="gültigen Benutzernamen mit 4-116 Zeichen" class="form-control">
                    <f:validateLength minimum="4" maximum="16" for="name"></f:validateLength>
                </h:inputText>
                <div class="required-icon">
                    <div class="text">*</div>
                </div>
            </div>
            <!-- Password -->
            <div class="required-field-block">
                <h:outputLabel for="password" value="Passwort"></h:outputLabel>
                <h:inputSecret id="password" value="#{userBean.user.password}"
                    class="form-control" required="true"
                    requiredMessage="Mailadresse angeben">
                </h:inputSecret>

                <div class="required-icon">
                    <div class="text">*</div>
                </div>
            </div>
            <!--  Email -->
            <div class="required-field-block">
                <h:outputLabel for="email" value="Email"></h:outputLabel>
                <h:inputText id="email" value="#{userBean.user.email}"
                    class="form-control" required="true"
                    requiredMessage="Passwort angeben">
                    <!-- Email Validation -->
                    <f:validator validatorId="emailValidator"></f:validator>
                </h:inputText>

                <div class="required-icon">
                    <div class="text">*</div>
                </div>
            </div>
            <!-- Age -->
            <div>
                <h:outputLabel for="age" value="Alter"></h:outputLabel>
                <h:inputText id="age" value="#{userBean.user.age}" class="form-control"></h:inputText>
                <h:message for="age"></h:message>
            </div>
            <h:commandButton id="send" value="Register" type="submit"
                action="#{userBean.addUser}" class="btn btn-primary"></h:commandButton>
            <h:message for="send"></h:message>
            <h:commandButton id="reset" value="Reset" type="submit"
                action="#{userBean.reset}" immediate="true" class="btn"></h:commandButton>
            <h:message for="send" errorClass="errorMessage" globalAll="true"></h:message>
        </h:form>

Answer 1

只需在带有属性<h:message/>的每个必需输入下使用jsf标记for，您应指向input's id.

另外，对于外观漂亮的样式，您可以添加引导类"text text-danger"。您还可以对label

使用属性<h:inputText>.

这意味着您将收到以下错误：

Email:Validation Error

而不是

email-id: Validation error.

例如：

    <h:outputLabel for="email" value="Email"></h:outputLabel>
                    <h:inputText id="email-id" label="Email" value="#{userBean.user.email}"
                        class="form-control" required="true"
                        requiredMessage="Passwort angeben">
                        <!-- Email Validation -->
                        <f:validator validatorId="emailValidator"></f:validator>
                    </h:inputText>
 <h:message for="email-id"/>

JSF <f：validator>和Bootstrap不能一起工作</f：validator>

1 个答案: