Использование JS для проверки на стороне клиента перед отправкой формы в JSF

Question

Я пытаюсь выполнить некоторую проверку на стороне клиента в моей регистрационной форме. Предполагается просто остановить отправку и отобразить текст, помогающий пользователю понять, что пошло не так.

Это мой Х HTML:

            <h:form>
                <div class="form-group mx-auto">
                    <h:outputLabel for="emailInput" value="Email"></h:outputLabel>
                    <p:inputText type="text" class="form-control" id="emailInput"   value="#{signupBackingBean.email}" required="true"></p:inputText>
                    <small id="emailError1" class="form-text">Field is required</small>
                    <small id="emailError2" class="form-text">Not avalid emailadress</small>

                </div>
                <div class="form-group mx-auto">
                    <h:outputLabel for="usernameInput" value="Username"></h:outputLabel>
                    <p:inputText type="text" class="form-control" id="usernameInput"  value="#{signupBackingBean.username}" required="true">
                        <f:validateLength minimum="5" maximum="20"></f:validateLength>
                    </p:inputText>
                    <p:message for="@previous" />
                </div>
                <div class="form-group mx-auto">
                    <h:outputLabel for="passwordInput" value="Password"></h:outputLabel>
                    <p:password class="form-control" id="passwordInput"  value="#{signupBackingBean.password}" match="passwordInput2" feedback="true" required="true" inline="true" ></p:password>
                </div>
                <div class="form-group mx-auto">
                    <h:outputLabel for="passwordInput2" value="Password Confirmation"></h:outputLabel>
                    <p:password class="form-control" id="passwordInput2"  value="#{signupBackingBean.password}" required="true"></p:password>
                    <p:message for="@previous" />
                </div>
                <div class="form-group mx-auto">
                    <h:commandButton type="submit" class="btn btn-primary mx-auto btn-block" onclick="return showErrorMessages()"  action="#{signupBackingBean.add}" value="Register" ></h:commandButton>
                </div>
            </h:form>

JS

var email = document.getElementById("emailInput");

function showErrorMessages() {
        document.getElementById("emailError1").style.display = inline;
}

CSS:

#emailError1{
    display: none;
}

План должен запустить проверку Primeface (не может быть нулевой) и сделать текст описания встроенным. Однако я не уверен, как это сделать. Прямо сейчас я просто пытаюсь подключить его к кнопке submit commandButton, но это проще сделать раньше, что также будет работать.

Заранее спасибо!

Answer 1

Проблема была в простой синтаксической ошибке. При использовании JS для установки атрибутов стиля атрибуты, такие как inline в этом случае, должны быть в форме строки. Так что я должен был изменить мой JS файл на:

function showErrorMessages() {
        document.getElementById("emailError1").style.display = "inline";
}