Set a Minimum Character for Form Element Text Area

[Ruchitha]

HOW CAN I ADD THE MINIMUM CHARACTER FOR THE TEXT AREA.

[CoopperBackpack]

Hello @Ruchitha,

If this is the Submission form, you may test this code in the Footer section (disable the HTML editor before pasting the code):

<script>
document.addEventListener('BeforeFormSubmit', textAreaHandler);
document.addEventListener('DataPageReady', clearMessageHandler);

const textAreaField = document.querySelector('textarea[id*="InsertRecordField_name"]'); //replace Field_name with the needed field name

function textAreaHandler(event){
     const textAreaLength = textAreaField.value.length;
     if(textAreaLength < 10) {  // 10 is the minimum length, should be customized
         event.preventDefault();
         textAreaField.setCustomValidity('The value must contain 10 characters and more'); //customize the message
         textAreaField.reportValidity();
         return;
         }
     else{
         textAreaField.setCustomValidity('');
         }
}

function clearMessageHandler(){
     textAreaField.addEventListener('input', () => {
         textAreaField.setCustomValidity('');
     })
}
</script>

When the user clicks the 'Submit' button and the number of characters is less than needed this message will be displayed (for example):

Hope this helps!

[Ruchitha]

Hi @CoopperBackpack,

Just wanted to say a big thanks for helping me out with that question!

Your advice was spot on, and I really appreciate you taking the time to help me out.

[chumkirebzi]

Hi Everyone!

Just wanted to add to @CoopperBackpack's great solution. 

In the following code:

const textAreaField = document.querySelector('textarea[id*="InsertRecordField_name"]'); //replace Field_name with the needed field name

The InsertRecordField_name can be changed to EditRecordField_Name if this is an update form.

This link may help.

Good luck!