How to Restrict Special Characters From a Form Field

Introduction

Would you like to restrict special characters inside certain form fields? In some cases, there may be certain characters you want to disallow in Single Line Text and Paragraph fields. In this tutorial, we’ll show you how to restrict those characters using Javascript.

Are you familiar with input masks? They offer a fantastic way to control the format and character input for form fields, all without requiring a snippet. If you’d like to explore custom input masks further, take a look at this comprehensive guide for more information.

Adding the JavaScript

First, you’ll want to copy this snippet to your site. There are two snippets below, one is to prevent special characters, the second is to prevent the paste function into a form field.

If you need any help in how to add snippets to your site, please review this tutorial.

/**
 * Restrict special characters from forms fields with special CSS class
 * Apply the class "wpf-char-restrict" to the field to enable.
 *
 * @link https://wpforms.com/developers/how-to-restrict-special-characters-from-a-form-field/
 */
 
function wpf_dev_char_restrict() {
?>
 
<script type="text/javascript">
     
    jQuery(function($){

        //Prevent any special characters in form fields with this CSS class name
        $( '.wpf-char-restrict' ).on( 'keypress', function(e){
             
			var regex = new RegExp("^[0-9a-zA-Z \b]+$");
			var key = String.fromCharCode(!event.charCode ? event.which: event.charCode);
			if (!regex.test(key)) 
				{
					alert ( "Special characters are not allowed in this field" ); // Put any message here
					event.preventDefault();
					return false;
				} 
        });
         
        //Prevent any paste features in form fields with this CSS class name
        $( '.wpf-char-restrict' ).bind( 'copy paste', function (e) {
            var regex = new RegExp( "@" );
             
            var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
             
            if (!regex.test(key)) {
                alert ( "Pasting feature has been disabled for this field" ); // Put any message here
                e.preventDefault();
                return false;
            }
        });
         
    });
 
</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_char_restrict', 10 );

In the first function, we’re not allowing any special characters to be entered from a keyboard. The second function will prevent any keyboard or mouse-click-paste functions into this field as well.

Creating your form

Next, create your form and add your form fields. If you need any assistance with creating your form, please check out this helpful tutorial.

create your form and add your fields

Adding the CSS Class

Next, select the field you want to restrict. Click Field Options and select Advanced.

Next, add wpf-char-restrict to the CSS Classes field. You’ll repeat this step for each form field you want to restrict. For the purpose of this documentation, we’re going to add it to both the Paragraph and Single Line Text fields.

restrict special characters with the javascript code above and adding the css class

And now if the user tries to type in special characters or if they try and paste something into these fields, they’ll see an alert message pop up on their screen.

This example shows a user trying to insert their email address into the Comments field.

to restrict special characters and pasting just use this snippet and an alert box will show your visitors this is not allowed for these fields

Would you like to also use JavaScript to allow multiple dates to be selected from a date picker? If so, please check out our tutorial on How to Allow Date Range or Multiple Dates in Date Picker.

Action Reference: wpforms_wp_footer_end