表单提交的Ajax验证

Question

我在使用2.2.12版本的jsf中是新的。我在表演中遇到了一些问题

1)。我得到了一个清单的事情，我需要显示该列表作为自动完成。我做了足够多的google，我发现这些东西是针对那些在jsf中找不到有用的东西的。

2)。我有多个字段的表单(输入框、密码和复选框)。我需要验证一些表单字段，如密码和符合密码匹配和电子邮件结构等。我能够执行自定义验证器验证。现在，我的要求是，如果表单字段的验证失败，则不应该通过单击form的submit按钮提交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的前端框架。我们有一个带有JSF 2.2+ primefaces的项目，我们正在处理很多JSF缺乏的问题。JSF不是为ajax设计的，当您试图使用它创建一个页面应用程序时，它会出现越来越多的问题。

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

• 素数面自完成
• 富人族
• 冰面

当然，您可以编写自己的组件，但您已经在开放源码库中了--我建议使用PrimeFaces。

你的第二个问题

最好的方法是在primefaces中使用已经存在的命令按钮，它具有ajax属性，该属性定义您的操作是否应该由ajax或标准请求调用。

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

如果将ajax设置为true，则您的操作将由ajax请求执行，如果验证在响应中失败，则将得到验证错误。您还注意到，命令按钮有属性"update“，它应该包含在执行操作后应该更新的元素列表。

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

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