JSF <f:validator> and Bootstrap do not work together

Question

I am trying to get my JSF Register form working with Bootstrap styles. Everything works fine, but i do not know how i can integrate my validation messages into my form. If i render this code the validation messages are just ignored. I don't know why? Any idea how i can make them visible and maybe style them good-looking? Many thanks in advance for your help!

        <!-- 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

Just use jsf tag <h:message/> under each required input with attribute for where you should point input's id.

Also for good-looking style you can add bootstrap class "text text-danger". Also you can use attribute label for <h:inputText>.

It means you will get following error:

Email:Validation Error

instead of

email-id: Validation error.

For example:

    <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"/>