New Developer Documentation Unlocks Field Validation for Custom UIs
One of the most convenient features of our Transfer Method Widget is the built-in field validation, meaning that you don’t need to know how many digits an account number has to be for a given country or if the last name is a required field. The widget also checks for valid characters, which can vary from country to country.
In addition to listing country-specific required and optional attributes in the direct deposit documentation on the Developer Portal, we are now also adding regular expression patterns. If you choose to build your own UI for collecting transfer method details (like banking information), you can take advantage of the regular expression patterns we provide and create your own field validation to match the bank’s requirements. See the example screenshot snippet below, with the API direct deposit information for the United States.
The page with this information can be found in the Hyperwallet documentation here.
Let’s use this screenshot as an example to make a simple form that validates the routing number and account number for a US bank.
Validate US Bank Routing and Account Numbers
In this example, we will only validate the routing and account numbers. (There are more required fields than these two, but I want to keep this demonstration simple.) The objective is to have a form like this, where the two input fields are validated:
This is the basic code for this form would be:
<form>
<label for=”routing”>Routing Number</label>
<input type=”text” id=”routing”>
<label for=”routing”>Account Number</label>
<input type=”text” id=”account”>
<input type=”button” value=”Submit”>
</form>
The simplest type of field validation is to use the <input> tag’s pattern attribute. The pattern attribute, which was added with HTML5, takes a regular expression and validates the value against it. Let’s add the patterns for routing and account numbers previously found in the documentation:
<form>
<label for=”routing”>Routing Number</label>
<input type=”text” id=”routing” pattern=”^[0-9]{9}$”>
<label for=”routing”>Account Number</label>
<input type=”text” id=”account” pattern=”^(?![0-]+$)[0-9-]{4,17}$”>
<input type=”button” value=”Submit”>
</form>
We can test the code we have so far by entering a valid routing number and an invalid account number:
The routing number field is a valid value, but the browser shows a tooltip for the account number field because its value is not. With CSS, the form inputs can easily change styling based on validation—for example, changing the border color to red if an input value is not valid. For this simple example, using the CSS pseudo-classes input:valid and input:invalid to change the input border color could be one way to show whether the value is valid or not.
Creating Your Transfer Method Form
By adding the regular expression patterns to the direct deposit requirements documentation, we now make country-specific banking validation information easily accessible for developers. With the patterns, developers can create their own UI while maintaining the same kind of validation as we provide in our transfer method widget.
This example shows usage of the direct deposit bank requirement patterns in its most simple form. Regular expression validation can be implemented in a variety of ways across different frameworks and programming languages.
Interested in joining the Hyperwallet developer community? Click here to get started.
