表单提交时的 Ajax 验证

Question

我是 jsf 的新手，使用 2.2.12 版本。 我在执行操作时遇到了一些问题

1)。我得到了一份清单，我需要将该清单显示为自动完成。我做了足够多的谷歌，我发现这些东西适用于无法在 jsf 中找到一些有用的primefaces。

2)。我有多个字段（输入框、密码和复选框）的表单。我需要验证一些表单字段，例如密码并符合密码匹配和电子邮件结构等。我可以通过自定义验证器执行验证。现在我的要求是，如果表单字段的验证失败，则不应通过单击表单的提交按钮来提交 ajax。表单也是由 ajax 请求提交的。 下面是我的表单代码。

 <div class="email-signup" id="email-signup">
                <h:form id="signupForm">
                    <div class="form-group">
                        <h:inputText value="#{userRegister.userName}" placeholder="username" class="input-text full-width" />
                    </div>
                    <div class="form-group">
                        <h:inputText value="#{userRegister.firstName}" placeholder="first name" class="input-text full-width" />
                    </div>
                    <div class="form-group">
                        <h:inputText placeholder="last name" value="#{userRegister.lastName}" class="input-text full-width" />
                    </div>
                    <div class="form-group">
                        <h:inputText id="email" value="#{userRegister.email}" validatorMessage="Wrong formatted email entered" class="input-text full-width" placeholder="email address">
                            <!--    <f:validator validatorId="emailValidator"/> -->
                            <f:validateRegex pattern="^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$" />
                            <f:ajax event="blur" render="emailMessage" />
                        </h:inputText>
                        <h:message id="emailMessage" for="email" style="color:red"/>

                    </div>
                    <div class="form-group">
                        <h:inputSecret id="password" value="#{userRegister.password}" class="input-text full-width" placeholder="password">

                        </h:inputSecret>

                    </div>
                    <!--<h:outputLabel for="confirm" value="Confirm password" />-->
                    <div class="form-group">
                        <h:inputSecret id="confirm" binding="#{confirm}" class="input-text full-width" placeholder="confirm password"/>

                    </div>
                    <div class="form-group">
                        <div class="checkbox">
                            <h:outputLabel>
                                <h:selectBooleanCheckbox/> Tell me about Chameleon news
                            </h:outputLabel>
                        </div>
                    </div>
                    <div class="form-group">
                        <p class="description">By signing up, I agree to Chameleon's Terms of Service, Privacy Policy, Guest Refund Policy, and Host Guarantee Terms.</p>
                    </div>
                    <h:commandButton value="SIGNUP" class="full-width btn-medium">
                        <f:ajax execute="signupForm" render="outputMessage" valueChangeListener="#{userRegister.getCallUserRegisterService}" onevent="showSignUpMessage" />
                        <h:outputText class="signup_message" id="outputMessage" value="#{userRegister.message !=null ? userRegister.message : ''}"/>
                    </h:commandButton>
                </h:form>
   </div>

请查看以上问题。

Answer 1

首先我不推荐使用 JSF 作为 ajax 的前端框架。我们有 JSF2.2 + primefaces 的项目，我们正在处理很多 JSF 的不足。 JSF 不是为 ajax 设计的，当您尝试使用它创建单页应用程序时，它会遇到越来越多的问题。

如果你必须使用 jsf - 你必须现在组件库是你的朋友:)。对于自动完成，您可以使用例如：

• primefaces autocomplete
• rich faces
• ice faces

您当然可以编写自己的组件，但您已经在开源库中拥有 - 我推荐 PrimeFaces。

你的第二个问题
最好的方法是在 primefaces 中使用已经存在的command button，它具有属性 ajax，它定义了您的操作是应该由 ajax 还是由标准请求调用。

    <p:commandButton value="Non-Ajax Submit" id="nonAjax" actionListener="#{buttonView.buttonAction}" ajax="true" />

如果将 ajax 设置为 true，那么您的操作将由 ajax 请求执行，如果响应中的验证失败，您将收到验证错误。您还注意到命令按钮具有“更新”属性，该属性应包含在操作继续后应更新的元素列表，例如

<p:commandButton value="Non-Ajax Submit" id="nonAjax" actionListener="#{buttonView.buttonAction}" ajax="true" update="@form"/>

在此操作之后，整个表单将被更新