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

Question

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

这是我的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>

JS-

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

CSS：

#emailError1{
display: none;
}

计划是触发Primeface验证(不能为null(并使描述文本内联。然而，我不确定如何做到这一点。现在我只是想把它连接到submit commandButton，但它更容易更早地完成，这也会起作用。

提前感谢！

Answer 1

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

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