Disable JSF form field validation when submit

Question

I have a <h:selectOneMenu> . Depending on what is selected will be shown one of the many <div> s related to the selection and will be hidden the others. Each <div> has some <h:inputText> that write to different @ViewScoped beans. Some of this <div> s even write to the same properties in the beans.

Ex.

<div>
    <h:outputLabel for="list" value="Items"/>
    <div>
        <h:message for="list"/>
        <h:selectOneMenu id="list" value="#{bean.selectedItem}" >
            <f:selectItem itemLabel="Select one"></f:selectItem>
             <f:selectItems value="bean.someItemsList" />
        </h:selectOneMenu>
    </div>
</div>

<div id="item1">
    <!-- some other input fields -->
    <div>
        <h:message for="item1input1"/>
        <h:inputText id="item3input1" value="bean.thisIsTheSameProperty" />
    </div>
</div>
<div id="item2">
    <!-- some other input fields -->
</div>
<div id="item3">
    <!-- some other input fields -->
    <div>
        <h:message for="item3input1"/>
        <h:inputText id="item3input1" value="bean.thisIsTheSameProperty" />
    </div>
</div>

The problem: When I select an item that will display a <div> (ex. <div id="item1"> ) and there is also another hidden <div> (ex. <div id="item3"> ) that writes to the same bean properties (ex. value="bean.thisIsTheSameProperty" ) and this properties are annotated with javax.validation.constraints.@NotNull , even I give a value to this input fields, when I submit the form, I think JSF runs also the hidden <div> (which normally has no input set).

What I see during debugging: When the form will be submited I see the setter of the bean will be called twice. The first time the bean properties will be set with the correct valeus I typed in but the second time the setter will be called with null values. So the validation will fail because of the @NotNull.

My assumption is that JSF tries to set the bean values twice, one for the input fields on the shown <div> and the second time for the hidden <div> (because they point to the same bean properties), but for the hidden bean there are not input fields set (they are null).

I show/hide the <div> s with jQuery depending on the item selected from the <h:selectOneMenu> . Ex.

$('#item1').show();
$('#item1').hide();
$('#item2').show();
$('#item2').hide();
$('#item3').show();
$('#item3').hide();

Is there a way to say JSF to not consider the hidden <div> s at all?

Answer 1

You seem to be assuming that hidden inputs (hidden via CSS) are not submitted to the server. This assumption is wrong and it is a plain html thing btw, not JSF related at all.

See eg Stop an input field in a form from being submitted

But still, it would allow client-side manipulation via a browser developer tool to 'attack' you application. JSF, contrary to all the hyped javascript UI frameworks is a full grown ' MVC framework ' that has build in protection against client-side manipulation/tampering and CSRF, XSS for which you'd need OWASP related functionality in other framework. (That and other things makes JSF (with PrimeFaces, OmniFaces and DeltaSpike) for me still a great framework to quickly develop business oriented applications.)

You'd better use ajax to conditionally render one div or the other but you cannot 'update' the divs when they are defined like you have them.

See also:

• Ajax update/render does not work on a component which has rendered attribute
• How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"

Answer 2

The answer from @Kukeltje and comment from @drkunibar worked for me. I modified it a little.

Actual solution:

$('#myForm').submit(function() {
            if($('#list').find(':selected').val() === 'itemOption1') {
                $('item3').remove();
            } else if($('#list').find(':selected').val() === 'itemOption3') {
                $('item1').remove();
            }
});

I check to see which option is selected. If option1 is selected then I remove the div with id item3 from the DOM, or else if the option3 is selected then I remove the div with id item1 from the DOM. In this way the binding bean.thisIsTheSameProperty is transmitted only one and the values will not be overriden.

Thank you.