Primefaces selectOneRadio ajax

I'm trying to display validation messages everytime the user clicks on a radio button.

This only works when I click on the submit button, but not when I click on the radio button:

    <h:form id="form">
        <p:panel id="panel">
            <ui:repeat value="#{questionsBean}" var="question">
                <h:panelGrid columns="3" style="margin-bottom:10px" cellpadding="5">
                    <h:outputText value="#{question.questionText}" />
                    <p:selectOneRadio id="question" value="#{question.response}"
                        validator="#{question.validate}" required="true">
                        <f:selectItem itemLabel="Yes" itemValue="Yes" />
                        <f:selectItem itemLabel="No" itemValue="No" />
                        <p:ajax update="msgQuestion" event="change"/>
                    </p:selectOneRadio>
                    <p:message for="question" id="msgQuestion" />
                </h:panelGrid>
            </ui:repeat>
            <p:commandButton id="btn" value="Save" update="panel" partialSubmit="true"/>
        </p:panel>
    </h:form>

Solution

The HTML DOM change event is the wrong event when you want to listen on whether the radio button (or checkbox) is clicked. You should be using the click event for this.

The value of the radio button (and checkbox) basically never changes. It has always the same value. The question is more whether that value will be sent to the server side or not. This is determined by the "checked" state which is usually triggered by the DOM click event.

The actual behaviour of the change event on radiobuttons/checkboxes is dependent on the webbrowser used. The behaviour is particulary inconsistent in the IE browser. It not only depends on the version used, but also in the rendering mode used (quirks mode vs standards mode). Perhaps you were actually using IE while testing.

The default event type of the PrimeFaces <p:ajax> (and the standard JSF <f:ajax>), which is valueChange already automatically covers this:

<p:ajax update="msgQuestion" event="valueChange" />

This will autogenerate the right change event handler in text inputs and dropdowns and the click event handler in radiobuttons and checkboxes.

But as said, it's the default event type already. Just omit it altogether.

<p:ajax update="msgQuestion" />