Introduction
Would you like to restrict certain special characters from a form field? In some cases, there may be certain characters you want to disallow in a Single Line Text field. In this tutorial, we’ll show you how to restrict those characters using Javascript.
Adding the JavaScript
First, you’ll want to copy this snippet to your site. There are two snippets below, one is for basic input form fields and the second is for the Paragraph Text 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($){
$( '.wpf-char-restrict' ).on( 'keypress', function(e){
var regex = new RegExp( "@" );
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
alert ( "Please fill out the form in English. Thank you!" ); // Put any message here
e.preventDefault();
return false;
}
});
//Prevent any copy and paste features to by-pass the restrictions
$( '.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 function into this field as well.
Creating your form
Next, create your form and add your form 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.
And now if the user tries to type in the @ sign, they’ll see an alert message pop up on their screen.
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.
Related
Action Reference: wpforms_wp_footer_end
FAQ
Q: What if I want to restrict all special characters?
A: In order to restrict all special characters, use this snippet.
/**
* 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($){
$( '.wpf-char-restrict' ).on( 'keypress', function(e){
var regex = new RegExp('^[a-zA-Z]+$');
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
alert ( "Please fill out the form in English. Thank you!" ); // Put any message here
e.preventDefault();
return false;
}
});
//Prevent any copy and paste features to by-pass the restrictions
$( '.wpf-char-restrict' ).bind( 'copy paste', function (e) {
var regex = new RegExp('^[a-zA-Z]+$');
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 );
Q: What if I wanted the opposite?
A: You can create opposite using a different snippet. For example, if you wanted to allow certain special characters such as ( ) – . /, you could use a different CSS class such as wpf-special-mask in the same way you did above, but the code snippet would looke like this:
/**
* 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($){
$( '.wpf-special-mask input' ).keyup(function(){
$(this).val($(this).val().toUpperCase());
});
$( '.wpf-special-mask' ).on( 'keypress', function(e){
var regex = new RegExp("^[a-zA-Z0-9)(/.-]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
alert ( "Please fill out the form in English. Thank you!" ); // Put any message here
e.preventDefault();
return false;
}
});
//Prevent any copy and paste features to by-pass the restrictions
$( '.wpf-special-mask' ).bind( 'copy paste', function (e) {
var regex = new RegExp("^[a-zA-Z0-9)(/.-]+$");
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 );
