How to Add Address Field Validation For Authorize.net

Introduction

Would you like to add address validation when using the Address form field on an Authorize.net payment form? By default, Authorize.net enforces a 60 character max address limit for both Address 1 and Address 2 lines on the Address form field and the users won’t know this until they hit Submit on your form. Using JavaScript you can easily provide an immediate address validation message to alert your visitors prior to submitting the form. In this tutorial, we’ll walk you through each step on how to achieve this.

Creating the form

First, we’ll need to create a form using the Authorize.net addon.

create the Authorize.net payment form including the Address form field

We’ll be including the Address field in the form so that we can capture and store this address with the Authroize.net transaction detail.

If you need any help in creating a payment form for Authorize.net, please check out this documentation.

Mapping the form fields

Once you’ve created the form and added your fields, you’ll need to also map these fields to the correct place inside the Authorize.net transaction detail.

To complete this step, click on the Payments tab inside the form builder. Once there, click the Authroize.net tab and being assigning the form fields from your form to the correct fields within the transaction detail.

map your form fields from your form to the correct fields inside Authorize.net

Adding the snippet

Now it’s time to add the snippet to your site. If you’re not sure where or how to add snippets to your site, please check out this tutorial.

/**
 * Add address validation for Authorize.net address fields
 *
 * @link https://wpforms.com/developers/how-to-add-address-field-validation-for-authorize-net/
 */

function wpf_dev_anet_address_length_check( ) {
?>
 
<script type="text/javascript">
    jQuery(function($){
		
		var formID = 1009; // Change form ID
		var addressFieldID = 5; // Change address field ID
		
        $( `#wpforms-${formID}-field_${addressFieldID}` ).on( 'keyup', function(){
			var addressLength = $(this).val().length + $( `#wpforms-${formID}-field_${addressFieldID}-address2` ).val().length;
			if ( addressLength > 60 ) {
				if (!$( '.anet-address-error' ).length) {
					$( `#wpforms-${formID}-field_${addressFieldID}-container > label` ).after( '<label class="wpforms-error anet-address-error"> <?php echo _e( 'The characters for the Address 1 line must not exceed 60.', 'plugin-domain' ); ?> </label>' );	
				}
			} else {
				$( '.anet-address-error' ).remove();
			}
		})
		$( `#wpforms-${formID}-field_${addressFieldID}-address2` ).on( 'keyup', function(){
			var addressLength = $(this).val().length + $( `#wpforms-${formID}-field_${addressFieldID}` ).val().length;
			if ( addressLength > 60 ) {
				if (!$( '.anet-address-error' ).length) {
					$( `#wpforms-${formID}-field_${addressFieldID}-container > label` ).after( '<label class="wpforms-error anet-address-error"> <?php echo _e( 'The characters for the Address 2 line must not exceed 60.', 'plugin-domain' ); ?> </label>' );	
				}
			} else {
				$( '.anet-address-error' ).remove();
			}
		})
    });
    </script>
<?php
}
 
add_action( 'wpforms_wp_footer_end', 'wpf_dev_anet_address_length_check', 30 );

There are two of things you’ll need to update with this snippet.

  1. var formID = 1009; // Change form ID
  2. var addressFieldID = 5; // Change address field ID

If you need any assistance in finding your form and field IDs, please review this tutorial.

Now when the users enter their address they will see an immediate address validation message if the address on line 1 or line 2 exceeds 60 characters.

users will see an immediate address validation message if the address on line 1 or line 2 exceeds 60 characters

And that’s all you need! Would you like to also send through an invoice number to Authorize.net? Check out our tutorial on How to Send an Invoice Number Through to Authorize.net Payments.

Action Reference: wpforms_wp_footer_end