CreditCard: required attribute not working

[aripddev]

I have added required="true" for cardNumber, cardHolderName, expire and cvc inputs, but it does not trigger messages or growl.

[melloware]

You are right. Reproducible test case: pfe-790.zip

it looks related to having to to use the pt:name is no longer binding it to the component.

[melloware]

Yuck looks like this is the problem: https://stackoverflow.com/questions/15893876/how-to-specify-name-attribute-in-hinputtext

So using name="cvc" etc allow browsers to know these are autocomplete fields let the browser fill in your CC info and that is how Card.js default looks for those fields. However JSF needs the name field to bind to the backend.

Have to think about this...

[melloware]

OK got it working with this example: pfe-790.zip

You have to use prependId="false" on the form and make the id's the names instead of using passthrough.

<h:form prependId="false">
    <p:growl id="growl" showDetail="true" showSummary="true">
        <p:autoUpdate />
    </p:growl>
    <p:panelGrid id="pnlCreditCard" columns="4">
        <f:facet name="header">
            <pe:creditCard id="creditCard" labelMonthYear="MM/YY" placeholderExpiry="**/**" placeholderName="Optimus Prime"/>
        </f:facet>
        <p:inputText id="number" placeholder="Card number" required="true"/>
        <p:inputText id="name" placeholder="Full name"  required="true"/>
        <p:inputText id="expiry" placeholder="MM/YY"  required="true"/>
        <p:inputText id="cvc" placeholder="CVC"  required="true"/>
    </p:panelGrid>
    <p:commandButton value="Update" update="@form" process="@form" />
</h:form>

[aripddev]

Well done 👍, thanks

[melloware]

awesome