CODEWITHSUNDEEP
ajaxjsf
kailash gaur
kailash gaur

Reputation: 1457

Ajax validation on form submit

I am new in jsf using 2.2.12 version. I have some problem in performing actions

1). I am getting a list of things and I need to show that list in as autocomplete. I did enough google and I found this things is for primefaces not able to find some helpful in jsf.

2). I have form with multiple fields(input box,password and checkbox). I need to validate some form fields like password and conform password matching and email structure etc. I am able to perform validation by custom validator. Now my requirement is if validation fails on form fields then ajax should not be submitted by clicking on submit button of form. The form is submitted by ajax request also. Below is my form code.

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

Please have a look on above problems.

Upvotes: 0

Views: 1210

Answers (1)

burovmarley
burovmarley

Reputation: 644

First of all I do not recommend to use JSF as frontend framework with ajax. We have project with JSF2.2 + primefaces and we are dealing with a lot of JSF lacks. JSF wasn't designed for ajax and it have more and more problems when you are trying to create a single page application with it.

If you have to use jsf - you must now that components libraries are your friends :). For autocomplete you can use eg:

You can of course write your own component but you already have in opensource libraries - I recommend PrimeFaces.

Your second problem
The best way is to use already existing command button in primefaces which has attribute ajax which defines if your action should be invoked by ajax or by standard request.

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

If set ajax to true then your action will be performed by ajax request and if validation fails in the response you will get validation errors. You have also notice that command button have attribute "update" which should contain list of elements which should be updated after action proceed eg

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

after this action whole form will be updated

Upvotes: 2

Related Questions