JSF Client Side validation

Question

I have the following code:

<div class="panel panel-default Border">
    <div class="panel-heading PanelHeaderBgColor h4 WhiteTextColor">Benutzer</div>
    <div class="panel-body">

        <div class="row">
            <div class="col-md-12">
                <p:commandButton styleClass="btn btn-success" value="Add user"
                                    oncomplete="PF('addUserDialog').show()">
                </p:commandButton>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <h:form id="right">
                    <p:dataTable id="userDT" var="user" style="min-height: 600px;"
                                        value="#{users}" selectionMode="single"
                                        selection="#{selectedUser}" rowKey="#{user.id}">

                        <p:column headerText="Username">
                            <h:outputText value="#{user.username}" />
                        </p:column>
                        <p:column headerText="Ganzer Name">
                            <h:outputText value="#{user.fullName}" />
                        </p:column>
                        <p:column headerText="Email">
                            <h:outputText value="#{user.email}" />
                        </p:column>
                        <p:column headerText="Auftraggeber">
                            <h:outputText value="#{user.customer}" />
                        </p:column>
                    </p:dataTable>
                </h:form>
            </div>
        </div>

        <h:form id="addUserForm">
            <p:dialog header="Add new user"
                                widgetVar="addUserDialog" modal="true"
                                showEffect="fade" hideEffect="fade" closeOnEscape="true"
                                resizable="false">

                <div class="row">
                    <div class="col-md-6">
                        <h:outputLabel for="addUsername" value="Username"></h:outputLabel>
                            <h:inputText styleClass="form-control" id="addUsername"
                                            maxlength="50" value="#{data.username}"></h:inputText>
                    </div>
                    <div class="col-md-6">
                        <h:outputLabel for="addUserFullname" value="Ganzer Name"></h:outputLabel>
                        <h:inputText styleClass="form-control" id="addUserFullname"
                            maxlength="50" value="#{data.fullName}"></h:inputText>
                    </div>
                </div>
                <div class="row">

                    <div class="col-md-6">
                        <h:outputLabel for="addUserPassword" value="Passwort"></h:outputLabel>
                        <h:inputSecret styleClass="form-control" id="addUserPassword"
                            maxlength="15" value="#{data.password}"></h:inputSecret>
                    </div>
                    <div class="col-md-6">
                        <h:outputLabel for="addUserPasswordRepeat"
                            value="Passwort wiederholen"></h:outputLabel>
                        <h:inputSecret styleClass="form-control"
                            id="addUserPasswordRepeat" maxlength="15"
                            value="#{data.passwordRepeat}"></h:inputSecret>

                    </div>
                </div>

                <f:facet name="footer">
                    <div class="row">
                        <div class="col-md-12">
                            <p:commandButton value="Speichern"
                                actionListener="#{logic.createUser}" update=":left @form"
                                styleClass="btn btn-success"
                                onsuccess="PF('addUserDialog').hide();"></p:commandButton>
                        </div>
                    </div>
                </f:facet>
            </p:dialog>
        </h:form>
    </div>
</div>

When the user opens the page there is a table with users. There is a button for adding a new user. After pressing this button a dialog appears and must enter username, full name and password.

My question is: Is there a way to validate the password on client side, basically I have some rules that it must be at least five characters and should contain some specific characters. I have seen a tutorial about that and they are using the regex validator and length validator but when I use this approach in my page, lets say that the user types not valid password, after pressing the button Add the dialog closes, and then I must open the dialog again to see these error messages, so is there a way to not close the dialog but still show the error messages ?