Sometimes you need to limit or prevent users from entering more than a certain number of words in a textbox. I am only going to show how to do this quickly using Javascript only but if you’re going to use this on your website, you should also have a similar check using PHP on form submission.
The first thing you need to do is define a custom class on your Gravity Form text area field. I am going to use a class of ‘my_field_4’ on my text area. The best way to add the JavaScript that I am going to use is to add it to your custom theme but I am going to show you how to add it using the HTML field on your Gravity Form. The GIF shows how to add these two items to your form.
Here’s the JavaScript that you need to paste in the HTML field that you just added to the form in the previous field. I am going to explain what it does. In my example, I am going to throw out an alert if the user has entered more than 10 words in the textbox as soon as they move out of the textbox. If the entered words are more than 10, I also disable submit button since we do not want them to submit the form if they exceed our limits.
<script>
jQuery(document).ready(function($){
$('.my_field_4 textarea').change(function(){
const input = $('.my_field_4 textarea').val();
const inputsplit = input.split(" ");
if(inputsplit.length > 10){
alert("You entered more than 10 words");
$('input[type=submit]').attr('disabled',true);
}
else{
$('input[type=submit]').attr('disabled',false);
}
});
});
</script>Don’t forget to include the <script> tags when you paste this into your HTML field. It basically lets the browser know that what follows is actually a script so that it doesn’t render it out on the page. The second line makes sure jQuery is available to us before we start using it. The third line is where we actually target the text area. jQuery has this handy function called ‘change’ which lets us detect when the user has finished entering text. We bind our code to the change event.
Fourth line gets the value from our text box that the user entered and stores in ‘input’ variable. Fifth line takes this variable and splits it using the space character and stores it into an array called ‘inputsplit’. The split function is a native JS function that breaks the string using our specified character (in our case, an empty space character). We then use the ‘length’ function to check if the text that user has entered has more than 10 words.
We then use the ‘attr’ function of jQuery to add the “disabled” attribute to the submit button of the form if there are more than 10 words. We also remove that attribute if the entered words are less than 10. Here’s how the entire thing works!
As I mentioned in the beginning, please use a PHP function to validate the number of words too so that you have some server-side validation too. My next post shows how to do a custom validation for a Gravity Form field.
You can contact me or post a project on Codeable for free to get a no-obligation quote.