在 JSF 中提交表单之前使用 JS 进行客户端验证答案

【问题标题】：Using JS for client side validation before submitting form in JSF在 JSF 中提交表单之前使用 JS 进行客户端验证
【发布时间】：2020-06-13 23:56:39
【问题描述】：

我正在尝试对我的注册表单进行一些客户端验证。它应该只是停止提交并显示一些文本来帮助用户了解问题所在。

这是我的 XHTML：

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

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

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

CSS：

#emailError1{
    display: none;
}

计划是触发 Primeface 验证（不能为空）并使描述文本内联。然而，我不确定如何做到这一点。现在我只是想将它连接到提交命令按钮，但更容易更早地做到这一点也可以。

提前致谢！

【问题讨论】：

你知道 PrimeFaces 有内置的客户端验证吗？
是的，但是由于我想显示“小”文本属性而不是消息，所以我认为使用 JS 会更容易。
1：它是一个小的“元素”（不是属性） 2：使用这样的东西是不常见的（使用 css 进行样式设置） 3：使用未定义/不明确的 id 作为必需和验证很奇怪...有效地使这个不必要的复杂不清楚的解决方案。
好的，谢谢！基本上我唯一想做的就是在我按下提交时检查输入的内容，并显示适当的消息。不觉得应该那么难吗？
PrimeFaces 客户端验证就是这样做的

标签： javascript validation jsf

【解决方案1】：

问题是一个简单的语法错误。使用 JS 设置样式属性时，属性，如本例中的 inline，必须是字符串的形式。所以我要做的就是将我的 JS 文件更改为：

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

【讨论】：