Validate inputText not in form tag

Question

I am creating a form that posts data to a external url (authorizeNet DPM). I need jsf to validate the inputText prior to allowing the submission to happen. How do I get the validation rules to work in this case?

<form action="EXTERNAL_URL" method="POST">
   <h:inputText id="x_card_num" required="true" requiredMessage="A 16-digit credit card number is required.">
      <f:ajax event="change" render="@this" />  
      <f:validateLength maximum="20" minimum="3" />
      <f:validateRegex pattern="[0-9]{16}" />
   </h:inputText>
<h:commandButton value="Submit" id="submit"/> 
</form>

Answer 1

JSF works on the server, so you always need to postback to your own server first. From there you could manually do a post to the target server (server to server communication). You could even capture the response of that server and stream it to the client.

Your client will see the URL of your server though, unless the target server responds with a redirect.

Answer 2

I think you may need to mix JSF with normal JavaScript and make use of PrimeFaces's <p:commmandButton>.

<h:form>
   <h:inputText id="x_card_num" required="true" requiredMessage="A 16-digit credit card number is required.">
      <f:ajax event="change" render="@this" />  
      <f:validateLength maximum="20" minimum="3" />
      <f:validateRegex pattern="[0-9]{16}" />
   </h:inputText>
   <h:message id="msg" for="x_card_num" />

   <p:commandButton value="Submit" process="@this, x_card_num" update="msg"
                    oncomplete="if (!args.validationFailed) populatePostFormAndSubmit();" />
</h:form>

<form id="postForm" action="EXTERNAL_URL" method="POST">
    <input id="postInput" />
</form>

The process is:

1. Users enter the card number in the JSF form and click Submit to start validating through an AJAX request.
2. If there is no validation error, copy the card number from x_card_num input to postInput and submit the postForm using JavaScript.