How to Restrict Numbers in a Single Line Text Form Field

Introduction

Would you like to restrict numbers from being entered in your Single Line Text fields? You can use an input mask to restrict this field to alpha characters only using the a inside the Input Mask field from the Advanced tab of the field and this would allow only lowercase letters. You can also use A as well and this would allow only uppercase letters. To learn more about input masks, please review this useful guide.

However, if you wanted to allow a mixture of upper and lowercase letters, you can easily achieve this with a small PHP snippet, you can easily restrict a Single Line Text form field to accept letters only. In this tutorial, we’ll show you the necessary code snippet to restrict numbers in these fields.

Creating the form

First, we’ll create a new form and add our fields to this form. We’re going to use the Single Line Text form field as our Username field.

If you need any assistance in creating a form, please review this documentation.

Adding the snippet

Now it’s time to add the snippet to your site. If you need any help on how and where to add snippets to your site, please check out this tutorial.

In our example, we’re going to prevent numbers inside our Single Line Text which is field ID 2 but only for the form ID 702.

You’ll need to update these ID numbers to match your own form and field IDs. For assistance in finding these IDs, please review this tutorial.

/**
 * Disallow numbers in a single-line text field
 *
 * @link https://wpforms.com/developers/how-to-restrict-numbers-in-a-single-line-text-form-field/
 */

function wpf_dev_disallow_numbers_text_field( $fields, $entry, $form_data ) {
        
    // Optional, you can limit to specific forms. Below, we restrict output to
    // form ID #702.
    if ( absint( $form_data[ 'id' ] ) !== 702 ) {
        return $fields;
    }
        
    // get value of the specific field ID and set it to a variable
    // field ID #2
    $mystring = $fields[2][ 'value' ];
 
    if (!preg_match ('/^([a-zA-Z]+)$/', $mystring))  
      {
		// Check the field ID 4 and show error message at the top of form and under the specific field
        wpforms()->process->errors[ $form_data[ 'id' ] ] [ '2' ] = esc_html__( 'The username can only contain letters.', 'plugin-domain' );
	  }
	
}
 
add_action( 'wpforms_process', 'wpf_dev_disallow_numbers_text_field', 10, 3 );

If the Username field contains any numbers at all when the form is submitted, an error message will appear and the form will not submit.

Would you also like to prevent special characters from being entered into a Single Line Text form field? Check out the tutorial on How to Restrict Special Characters From a Form Field.

Related

Action Reference: wpforms_process

FAQ

Q: What if I want to prevent the numbers from the field prior to the form submission?

A: If you’d like to stop users from entering the numbers on the fly, you can use a different script for this. You’ll also need to add a CSS class to the field.

To begin, edit the form and with the Single Line Text field selected, click the Advanced tab under Field Options and add no-numbers to the CSS Classes field.

Next, add this snippet to your site.

/**
 * Dynamically prevent numbers from being entered on single line text fields
 *
 * @link https://wpforms.com/developers/how-to-restrict-numbers-in-a-single-line-text-form-field/
 */

function wpf_dev_restrict_numbers( ) {
?>
  <script type="text/javascript">
    (function($) {
      var No_Numbers_Custom_Validation = {
        init: function() {
          $(document).on( 'wpformsReady', No_Numbers_Custom_Validation.customRules);
        },
        customRules: function() {
          if (typeof $.fn.validate !== 'undefined') { 
            $.validator.addMethod( "check_for_number", function(value, element, param) {
              var $ele = $(element);
              return this.optional(element) || ! /\d/.test(value);
            }, $.validator.format( "This field cannot accept numbers." ));
          }
          if ( $( '.no-numbers input' ).length ) {
            $( '.no-numbers input' ).rules( 'add', {
              check_for_number: true
            });				
          }
        },
      }
      No_Numbers_Custom_Validation.init();
    })(jQuery);
  </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_restrict_numbers', 30 );

Once the snippet is added, an immediate error message will display alerting the visitor to the validation error when they tab or click out of the field.