We know how to setup a character count limit on a field using the "maxlength" additional attributes, but how can we setup a word count limit on a field?

Please advise as soon as possible.

Thank you.

Hi Tom,

Thanks for your inquiry.

You need to add an additional "onchange" attribute and then enter form options > Custom JavaScript and write the script to make it work.

Drop us a line if you'll have any further inquiries.

Hi Zhanna,

Thank you for your response.

Ok, please can you give me the Custom JavaScript code to make it work?

Thank you.

Hi Tom,

You want it only for the text input field, right?

Hi Zhanna,

Yes, we just want to limit the number of words which can be inserted into the field.

Thanks

Can we have a response to this please?

Hi Tom,

In reality I was seeking for a easier way and found it. We can do this with Regular expressions option.

While creating a text input field, there is an option Validation (Regular Exp.), please enable it, under it there will appear a field Regular expression, please write the below expression there:

^(?:\b\w+\b[\s\r\n]*){1,10}$

Here 10 stands for the number of words you want to limit. Please change it per your requirements.

Below you'll see a field Alert Message, here yo can write custom alert text that will appear when user exceeds the number of words.

I have also made a screenshot for you to better imagine what should go where.

Drop me a line if you'll have any further inquiries.

Hi Zhanna,

Thank you for your response.

Your solution sounds good, however I don't seem to have the same options for my text input. Please see the following screenshot - prntscr.com/avfaiz

Please note I am using Joomla 3.4.8 and FormMaker 3.6.0.

Please advise.
Thanks

Hi Tom,

I'm sorry, this option is available for WordPress Form Maker and unfortunately not yet available for Joomla.

So, we should do it with Custom JavaScript.

For this please enter the text input field and add an additional attribute like I show in the screenshot.

After that, please enter form options JavaScript and add the below code:

// before form submit
function myfunction(elem) 
{
     
     var my_value =  jQuery(elem).val();
     if(my_value.split(" ").length > 2 ){
          alert('message');
 jQuery('.button-submit ') .attr('disabled', 'disabled');
      jQuery(elem) .effect( "shake", {}, 500 ).css("background-color","#FF8F8B").animate({backgroundColor: transparent}, {duration: 500, queue: false });
           
     } else{
  jQuery(elem).css("background-color","transparent");
 jQuery('.button-submit ') .removeAttr('disabled');
}

Hi Zhanna,

Thank you for your response.

I have tried inserting the following Javascript in the Javascript Options....

// before form submit 
function myfunction(elem) 
{

var my_value = jQuery(elem).val(); 
if(my_value.split(" ").length > 400 ){ 
alert('400 words maximum.'); 
jQuery('.button-submit ') .attr('disabled', 'disabled'); 
jQuery(elem) .effect( "shake", {}, 500 ).css("background-color","#FF8F8B").animate({backgroundColor: transparent}, {duration: 500, queue: false });

} else{ 
jQuery(elem).css("background-color","transparent"); 
jQuery('.button-submit ') .removeAttr('disabled'); 
}

Hi Tom,

The issue is that you haven't used the same additional attribute value, that I have used.

Please use these variables and you'll see it working.

Name: "onchange"
Value: "myfunction(this)"

Hi Zhanna,

Thank you for your message.
Apologies for the delay in getting back to you.
By the time we looked into this issue the form was close to expiring.

However we will need this feature on a new form on our website.
Please can you provide the exact code to insert and directory to insert to?

Many Thanks

Tom

Hi Tom,

First of all please add an additional attribute to the field, with the below info:

Name - onchange
Value - myfunction(this)

Then please enter for options > Javascript and add the below code there:

// before form submit
function myfunction(elem) 
{
     
     var my_value =  jQuery(elem).val();
     if(my_value.split(" ").length > 2 ){
          alert('message');
 jQuery('.button-submit ') .attr('disabled', 'disabled');
      jQuery(elem) .effect( "shake", {}, 500 ).css("background-color","#FF8F8B").animate({backgroundColor: transparent}, {duration: 500, queue: false });
           
     } else{
  jQuery(elem).css("background-color","transparent");
 jQuery('.button-submit ') .removeAttr('disabled');
}

I tried this using newest version of form maker on wordpress and it didn't work, please advise - need this ASAP

Dear Eric,

Thanks for getting to us!

Please note that Web-Dorado forum is closed for new posts. You can open tickets with your topic links.

Please contact us using this form. .

Do not forget to indicate the link to this forum thread in your message. Thanks! Have a good day!