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? 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.

create your form and add your fields

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.

remember to update the form and field ID numbers in the snippet to match your own

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 must not contain numbers.', '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.

now you can restrict numbers in a single line text form field

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.

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.

add the CSS class to your single line text field under the Advanced tab of the Field Options section

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.