JSF 2.0 Clearing validation error messages using JS or AJAX

Question

I have a web page with two radio buttons and two corresponding text boxes. Both are part of a single radio group. The page also has a submit button.

o Radio1 [Textbox1] o Radio2 [Textbox2]

|Submit|

When I select Radio1 and click on submit, validation error messages are being displayed if errors occur. These are gloabl error messages which appear on top of the page for all the fields. I have used validatorMessage attribute of

<h:inputText>

to display the errors and

<f:validateRegex pattern="(^[0-9]{1,15}$)" />

to validate the error. Also I have

<h:messages class="errors"  style="color:red;" layout="table" />

on top of the xhtml page.

My requirement is that when I click on Radio2, I need the Radio1's error messages to disappear, since they are irrelevant for Radio2. Similarly vice versa.

Is there a way to clear Radio1's error messages using AJax or JS whenever Radio2 is selected?

Updated with radio code:

<t:selectOneRadio id="options" value="#{reqscope.selectedRadio}" layout="spread">
    <f:selectItem itemValue="radio1" itemLabel="Policy number" />
    <f:selectItem itemValue="radio2" itemLabel="Customer ID" />    
</t:selectOneRadio>

<t:radio for="options" index="0"  name="search_by1" onclick="searchSelected()">

One question per question please. Edit and remove the second question and post it in its own question. — BalusC, Aug 08 '13 at 01:32

BalusC · Accepted Answer · 2013-08-09T00:42:09.427

2

You can use <f:ajax execute> to specify only those fields which needs to be processed (and thus converted and validated). You can use <f:ajax render> to specify components which needs to be ajax-updated, in this case the messages component so that it will be refreshed with new messages.

On the <f:validateRegex> of the text boxes, you can use disabled attribute to disable the validation whenever the selected radio button value doesn't match the expected value.

The following example should do:

<h:messages id="messages" ... />

<h:form id="form">
    ...
    <t:selectOneRadio id="options" ...>
        ...
        <f:ajax execute="@this textbox1 textbox2" render=":messages" />
    </t:selectOneRadio>
    ...
    <h:inputText id="textbox1" ...>
        <f:validateRegex ... disabled="#{param['form:options'] != 'radio1'}" />
    </h:inputText>
    <h:inputText id="textbox2" ...>
        <f:validateRegex ... disabled="#{param['form:options'] != 'radio2'}" />
    </h:inputText>
    ...
</h:form>

edited Aug 09 '13 at 00:42

answered Aug 08 '13 at 15:01

BalusC

1,082,665
372
3,610
3,555

Also, both the radio buttons are a part of a single group – user1722908 Aug 08 '13 at 20:11
Just the same way. Nest `` inside ``. – BalusC Aug 08 '13 at 20:13
I have updated my question with the code for creating radio button, Where do I insert there ? The radio buttons are not under different tags. Can we have for each selectItem ? – user1722908 Aug 08 '13 at 20:23
I believe that you've to solve the problem differently. You basically need `required="#{selectedRadioButtonValue = 'some'}"` instead of `required="true"`. – BalusC Aug 08 '13 at 20:29
I am sorry, but I am not completely clear. I do not have required="true". – user1722908 Aug 08 '13 at 20:36
Sorry, I now see what you want. I updated the answer. Hopefully that's indeed what you're concretely asking for. – BalusC Aug 09 '13 at 00:42
I added disabled="#{param['request:options'] != radio1}" (request is the form name). But the validateregex remians disabled at all times. It is not fired at all. – user1722908 Aug 09 '13 at 15:40
It must match exactly the request parameter name of the radio button. Look in HTTP traffic monitor to see it. – BalusC Aug 09 '13 at 15:43
I donot have http watch in my system and do not have rights to install it. Is there any other way I can check? It should be form:options as seen in your answer right ? – user1722908 Aug 09 '13 at 16:16
No, it's in the browser. Just press F12 in Chrome/IE>9/Firebug and click "Net/Network" tab to see the HTTP traffic monitor. Another way would be to look in JSF-generated HTML output and pick exactly the value of ``. But that's only easy to understand if you're familiar with basic HTML. – BalusC Aug 09 '13 at 16:19
It has – user1722908 Aug 09 '13 at 16:34

score 1 · Answer 2 · answered Jun 08 '16 at 21:11

1

With Prime Faces you can use

You can see an example in the following link http://www.primefaces.org/showcase/ui/misc/resetInput.xhtml

answered Jun 08 '16 at 21:11

Gavi

1,300
1
19
39

Nope, it serves a different purpose. See also http://stackoverflow.com/q/14371723 – BalusC Jun 09 '16 at 07:40

JSF 2.0 Clearing validation error messages using JS or AJAX

2 Answers2