Using Richfaces client side validation on submit

[Brian Wheeler]

Hey Everyone,

I got my client side validation to work using this example provided here RichFaces Client Side Validation

Notice, that there is no validation errors until you type and click out of that input form. Not a use case I want.

I'm trying to validate the input forms during an on submit action. Similar to to example provided here. rich:message demo

Using the above example source code, the problem I'm having is when I click the submit button nothing happens. No validation error and no submit action. Am I missing something? Can someone experienced with what I'm trying to do give me some feedback?

Thanks in Advance.

[Tim McGuire]

Brian Wheeler wrote:Hey Everyone,

I got my client side validation to work using this example provided here RichFaces Client Side Validation

Notice, that there is no validation errors until you type and click out of that input form. Not a use case I want.

I'm trying to validate the input forms during an on submit action. Similar to to example provided here. rich:message demo

Using the above example source code, the problem I'm having is when I click the submit button nothing happens. No validation error and no submit action. Am I missing something? Can someone experienced with what I'm trying to do give me some feedback?

Thanks in Advance.

To be clear, you want validation to happen when you click submit button? I can't give feedback unless I see the code you use. Can you post the code that you are using?

[Brian Wheeler]

Tim McGuire wrote:

Brian Wheeler wrote:Hey Everyone,

I got my client side validation to work using this example provided here RichFaces Client Side Validation

Notice, that there is no validation errors until you type and click out of that input form. Not a use case I want.

I'm trying to validate the input forms during an on submit action. Similar to to example provided here. rich:message demo

Using the above example source code, the problem I'm having is when I click the submit button nothing happens. No validation error and no submit action. Am I missing something? Can someone experienced with what I'm trying to do give me some feedback?

Thanks in Advance.

To be clear, you want validation to happen when you click submit button? I can't give feedback unless I see the code you use. Can you post the code that you are using?

Hey Tim,

Yes, I would like it to validate on the client side on submit, if validation pass submit form. Currently, it validates when you type text and move focus outside the form. I think this is default behavior. Here's the code snippet.

xhtml

<rich:panel>
<f:facet name="header">
<h:outputText value="Please fill out the following:"/>
</f:facet>
Name:
<h:inputText value="#{data.name}" id="name">
<rich:validator/>
</h:inputText/>
<rich:message for="name" /> 
<h:commandButton value="Submit"/>
</h:inputText>
</rich:panel>

bean

@Named("data")
@RequestScoped
public class UserBean {

    @NotEmpty
    @Size(min=2, max =30) //test size
    private String name = "";

...
Accessors...

[Tim McGuire]

Brian Wheeler wrote:

Tim McGuire wrote:

Brian Wheeler wrote:Hey Everyone,

I got my client side validation to work using this example provided here RichFaces Client Side Validation

Notice, that there is no validation errors until you type and click out of that input form. Not a use case I want.

I'm trying to validate the input forms during an on submit action. Similar to to example provided here. rich:message demo

Using the above example source code, the problem I'm having is when I click the submit button nothing happens. No validation error and no submit action. Am I missing something? Can someone experienced with what I'm trying to do give me some feedback?

Thanks in Advance.

To be clear, you want validation to happen when you click submit button? I can't give feedback unless I see the code you use. Can you post the code that you are using?

Hey Tim,

Yes, I would like it to validate on the client side on submit, if validation pass submit form. Currently, it validates when you type text and move focus outside the form. I think this is default behavior. Here's the code snippet.

xhtml

<rich:panel>
<f:facet name="header">
<h:outputText value="Please fill out the following:"/>
</f:facet>
Name:
<h:inputText value="#{data.name}" id="name">
<rich:validator/>
</h:inputText/>
<rich:message for="name" /> 
<h:commandButton value="Submit"/>
</h:inputText>
</rich:panel>

bean

@Named("data")
@RequestScoped
public class UserBean {

    @NotEmpty
    @Size(min=2, max =30) //test size
    private String name = "";

...
Accessors...

The example you linked to has validation parameters in the client side:
<h:form> <h:panelGrid columns="3"> <h:outputText value="Name:" /> <h:inputText label="Name" id="name" required="true" value="#{userBean.name}"> <f:validateLength minimum="3" /> </h:inputText> <rich:message for="name" ajaxRendered="true" /> <h:outputText value="Job:" /> <h:inputText label="Job" id="job" required="true" value="#{userBean.job}"> <f:validateLength minimum="3" maximum="50" /> </h:inputText> <rich:message for="job" ajaxRendered="true" /> <h:outputText value="Address:" /> <h:inputText label="Address" id="address" required="true" value="#{userBean.address}"> <f:validateLength minimum="10" /> </h:inputText> <rich:message for="address" ajaxRendered="true" /> <h:outputText value="Zip:" /> <h:inputText label="Zip" id="zip" required="true" value="#{userBean.zip}"> <f:validateLength minimum="4" maximum="9" /> </h:inputText> <rich:message for="zip" ajaxRendered="true" /> <f:facet name="footer"> <a4j:commandButton value="Ajax Validate" /> </f:facet> </h:panelGrid> </h:form>

so, why don't you use a validateLength tag in your xhtml?

[Brian Wheeler]

Hey Tim,

I'm just playing around with the JSR-303 constraints. I can use either the JSR-303 or the JSF validator constraints, they both do what I want it to do. I'm not sure which way is preferred, but I'm not concerned with it right now.

My focus right now is to validate the input forms client side (server ajax calls) after the user clicks the submit button.

[Tim Holloway]

JSF validators are done at the GUI level. JSR-303 validations are executable at multiple levels. For example, I use them on ORM record fields to catch bad data before it commits to the database. You can also mix and match, which can be good, for example, if you are connected to an ORM record, but for the particular task in the GUI, you want additional restrictions above and beyond the default ORM validations.

Web clients don't care about "moving outside the form", but if you move outside the control, a JavaScript onblur event is fired to indicate that the control has lost focus. Normally you have to explicitly code any AJAX handling of that event, but if you use appropriate AJAX-friendly tags, they can handle the job for you. The base JSF tags do not do any javascript events without external help.

[Brian Wheeler]

Tim Holloway wrote:JSF validators are done at the GUI level. JSR-303 validations are executable at multiple levels. For example, I use them on ORM record fields to catch bad data before it commits to the database. You can also mix and match, which can be good, for example, if you are connected to an ORM record, but for the particular task in the GUI, you want additional restrictions above and beyond the default ORM validations.

Web clients don't care about "moving outside the form", but if you move outside the control, a JavaScript onblur event is fired to indicate that the control has lost focus. Normally you have to explicitly code any AJAX handling of that event, but if you use appropriate AJAX-friendly tags, they can handle the job for you. The base JSF tags do not do any javascript events without external help.

Hey Tim Holloway,

I appreciate the explanation. I've tried using <a4j:commandButton/> instead of <h:commandButton/> but with no success. According to the demo documentation, <a4j:commandButton/> should do the job, however, nothing happens, no validation or submission of the form. But with the <h:commandButton/> there is no validation, which I expected. But at least it can submit the form. As you can tell, I'm new to JSF/Richfaces, can you advise how I can explicitly code an ajax handling event to fire all the validation forms after clicking the <h:commandButton/>?

[Tim Holloway]

ALL form submits are validated. That's a fundamental part of the JSF contract.

RichFaces offers two extensions to the standard form validation process. One is client-based, using generated Javascript and one is server-based, using AJAX.

This element:

<rich:validator />

runs client-side validation. There is an implied (default) 'event="change"' on the validator tag. I've had occasional grief with change events, so I tend to use the blur event, instead.

This tag is ONLY available on RichFaces 4 and will be silently ignored if you're using RichFaces 3.

The other extension is the "ajaxValidator" tag. It is available for RichFaces 3 and it basically submits the form as though the containing control was the only control on the form, JSF runs the validation, then short-circuits past the update and action phases, so that only validation is done.

Actually, RF3 also supports a beanValidator, but that's another story.

[Brian Wheeler]

Tim Holloway wrote:ALL form submits are validated. That's a fundamental part of the JSF contract.

RichFaces offers two extensions to the standard form validation process. One is client-based, using generated Javascript and one is server-based, using AJAX.

This element:

<rich:validator />

runs client-side validation. There is an implied (default) 'event="change"' on the validator tag. I've had occasional grief with change events, so I tend to use the blur event, instead.

This tag is ONLY available on RichFaces 4 and will be silently ignored if you're using RichFaces 3.

The other extension is the "ajaxValidator" tag. It is available for RichFaces 3 and it basically submits the form as though the containing control was the only control on the form, JSF runs the validation, then short-circuits past the update and action phases, so that only validation is done.

Actually, RF3 also supports a beanValidator, but that's another story.

All forms are validated on submit? But why isn't it?

Here is the code, this should work but it doesn't. No validation or submits.

xhtml code snippet

<rich:panel>   
<f:facet name="header">   
<h:outputText value="Please fill out the following:"/>   
</f:facet>   
Name:   
<h:inputText value="#{data.name}" id="name" required="true">
<f:validateLength minimum="3"/>   
<rich:validator/>   
</h:inputText/>   
<rich:message for="name" />    
<a4j:commandButton value="Submit"/>   
</h:inputText>   
</rich:panel> 

[Tim Holloway]

It wouldn't be a bad idea to put an h:messages tag in there. You may be failing a validation that isn't assigned to a rich:message. Also I should qualify on the validations. JSF validators (including the "required=" attribute) are checked, but JSR-303 validators will only operate if some external mechanism runs them. Presumably, that would be the RichFaces validation tags, but there are other options, including one from the Apache MyFaces team.

BTW, One of the first things you should do when things don't work is drop Request Scope and move to Session Scope. Request Scope is almost entirely useless.

[Brian Wheeler]

Tim Holloway,

I tried what you suggested with no luck.

I also tried just jsf validation and getting the same behavior, no validation.

So far Richfaces validation works but only when I type something in the form and move focus out of the form. As a workaround, how can I code to explicitly validate all the forms when the user hit the submit button?

<h:paneGrid>   
<f:facet name="header">   
<h:outputText value="Please fill out the following:"/>   
</f:facet>   
Name:   
<h:inputText value="#{data.name}" id="name" required="true">  
<f:validateLength minimum="3"/> 
</h:inputText/>   
<h:message for="name" />    
<h:commandButton value="Submit"/>   
</h:inputText>   
</h:panelGrid> 

[Tim Holloway]

OK. Repeating myself, you shouldn't be seeing behavior when your input focus exits a form because there's no such JavaScript event. However, exiting a control, even if it's on the same form, will fire a "blur" event.

You cannot validate multiple forms when you click a commandLink or commandButton, because fundamental design limitations in HTML (not JSF) mandate that only the control values in the form containing the commandLink/commandButton will be submitted (and therefore validated).

The "f:validator"s should always work on a form submit. However, validations on backing bean properties that are specified by JSR-303 annotations will only be applied if there's some additional helper software plugged in to detect and process those validations.

Unfortunately, the amount of work it would take for me to resolve your problem if none of the above hints help is more than I can afford to do for free. But these mechanisms do work, so don't give up hope!