jsfprimefacesprimefaces-extensions

Primefaces Dynaform Strange Behavior With f:validateLength


I'm currently in project to create dynamic form, using Primefaces 8.0 and Primefaces Extension 8.0. I want to make length validation in user input for phone number with minimum and maximum length using f:validateLength, but somehow the validation always fails said the length is greater than allowed even though i set the maximum to 10 and I just input 1 character. Here's my code

xhtml:

<h:form prependId="false">
            <p:messages/>
            <pe:dynaForm id="df" 
                         value="#{testMBean.modelz}" var="data" 
                         class="ui-fluid" style="width: 100%;" varContainerId="dfid">
                <pe:dynaFormControl id="dfc-text" type="Text" style="white-space: normal;">
                    <p:panelGrid id="pg-txt" columns="3" layout="grid" class="no-padding no-border"
                                 styleClass="ui-panelgrid-blank form-group"
                                 columnClasses="ui-grid-col-4,ui-grid-col-8,ui-grid-col-2">
                        <p:outputLabel for="@next" 
                                       value="#{data.labelEn}"/>
                        <p:inputText id="txt" value="#{data.value}" required="false">
                            <f:validateLength for="@previous" minimum="#{data.minLength}" maximum="#{data.maxLength}"/>
                        </p:inputText>
                        <p:outputLabel value="#{data.minLength} - #{data.maxLength}"/>
                    </p:panelGrid>
                </pe:dynaFormControl>
            </pe:dynaForm>
            <p:commandButton process="@form" update="@form"/>
</h:form>

TestMBean:

private DynaFormModel modelz;

modelz = new DynaFormModel();
DynaFormRow row = modelz.createRegularRow();
DynamicModel dm = new DynamicModel();
dm.setMinLength(0);
dm.setMaxLength(10);
dm.setLabelEn("Test");
row.addControl(dm, "Text");
dm = new DynamicModel();
dm.setMinLength(1);
dm.setMaxLength(20);
dm.setLabelEn("Test2");
row.addControl(dm, "Text");

DynamicModel:

@Getter
@Setter
@ToString
public class DynamicModel implements Serializable {
    private String labelEn;
    private Object value;
    private Integer minLength;
    private Integer maxLength;
}

The result: It's said that the maximum allowed value is 0.

It's said that the maximum allowed value is 0 but as you can see I display the value for minLength and maxLength and it shows that the minLength is 0 and maxLength is 10. So I check the source and got this: Yes it shows 0 for both min and max Length

Am I doing something wrong? Can anyone please point out where I did wrong. Thanks.


Solution

  • I solved the problem using custom validator that extends javax.faces.validator.LengthValidator with f:attribute tag to set the minimum and maximum value.

    Create TextValidator which extends javax.faces.validator.LengthValidator to intercept the attributes:

    public class TextValidator extends LengthValidator {
    
        @Override
        public void validate(FacesContext context, UIComponent component, Object value)
                throws ValidatorException {
            if (value != null && !value.toString().trim().isEmpty()) {
                Object minimum = component.getAttributes().get("minimum");
                Object maximum = component.getAttributes().get("maximum");
                setMinimum(minimum != null ? Integer.valueOf(minimum.toString()) : 0);
                setMaximum(maximum != null ? Integer.valueOf(maximum.toString()) : 0);
            }
            super.validate(context, component, value);
        }
    
    }
    

    TestMBean:

    TextValidator textValidator = new TextValidator();
    modelz = new DynaFormModel();
    DynaFormRow row = modelz.createRegularRow();
    DynamicModel dm = new DynamicModel();
    dm.setMinLength(0);
    dm.setMaxLength(10);
    dm.setLabelEn("Test");
    row.addControl(dm, "Text");
    dm = new DynamicModel();
    dm.setMinLength(2);
    dm.setMaxLength(20);
    dm.setLabelEn("Test2");
    row.addControl(dm, "Text2");
    

    Then bind textValidator to f:validator tag in xhtml:

    <h:form prependId="false">
            <p:messages/>
            <pe:dynaForm id="df" 
                         value="#{testMBean.modelz}" var="data" 
                         class="ui-fluid" style="width: 100%;" varContainerId="dfid">
                <pe:dynaFormControl id="dfc-text" type="Text" style="white-space: normal;">
                    <p:panelGrid id="pg-txt" columns="3" layout="grid" class="no-padding no-border"
                                 styleClass="ui-panelgrid-blank form-group"
                                 columnClasses="ui-grid-col-4,ui-grid-col-8,ui-grid-col-2">
                        <p:outputLabel for="@next" 
                                       value="#{data.labelEn}"/>
                        <p:inputText id="txt" value="#{data.value}" required="false">
                            <f:validator binding="#{testMBean.textValidator}"/>
                            <f:attribute name="minimum" value="#{data.minLength}"/>
                            <f:attribute name="maximum" value="#{data.maxLength}"/>
                        </p:inputText>
                        <p:outputLabel value="#{data.minLength} - #{data.maxLength}"/>
                    </p:panelGrid>
                </pe:dynaFormControl>
                <pe:dynaFormControl id="dfc-text2" type="Text2" style="white-space: normal;">
                    <p:panelGrid id="pg-txt2" columns="3" layout="grid" class="no-padding no-border"
                                 styleClass="ui-panelgrid-blank form-group"
                                 columnClasses="ui-grid-col-4,ui-grid-col-8,ui-grid-col-2">
                        <p:outputLabel for="@next" 
                                       value="#{data.labelEn}"/>
                        <p:inputText id="txt2" value="#{data.value}" required="false">
                            <f:validator binding="#{testMBean.textValidator}"/>
                            <f:attribute name="minimum" value="#{data.minLength}"/>
                            <f:attribute name="maximum" value="#{data.maxLength}"/>
                        </p:inputText>
                        <p:outputLabel value="#{data.minLength} - #{data.maxLength}"/>
                    </p:panelGrid>
                </pe:dynaFormControl>
            </pe:dynaForm>
            <p:commandButton process="@form" update="@form"/>
        </h:form>
    

    Here's the output if the validation fails: enter image description here

    And here's if the value passes the validation: enter image description here

    Thanks to this answer