Validate a text length in a text area

 
 

Download the source code:

* indicates required
 
 

Validate a text length in a text area HTML element

The ValidateForm() function prevents a user from submiting the form with a blank text area.

 function ValidateForm()
{
    //if textarea is blank - display message
    if($('#note').val()=="")
    {
       var text="Please enter your note!";

       noty({
              text: text,
              layout: 'center',

              animation: {
                open: 'animated flipInX', // Animate.css class names
                close: 'animated flipOutX', // Animate.css class names
                easing: 'swing', // unavailable - no need
                speed: 500 // unavailable - no need
            },

              closeWith: ['click'],
              timeout: 2500,
              type: 'success'

         });

         return false;
    }
    else
    return true;
}

The disablekeys(myid) function disables all keys except the backspace key. The text area id is used as a parameter.

 function disablekeys(myid)
{
var elem=document.getElementById(myid);

 	 elem.onkeydown = function (e)
 	{
  		if(e.keyCode !== 8)
  		return false;
 	}
}

The enablekeys(myid) function enables all keys.

 function enablekeys(myid)
{
var elem=document.getElementById(myid);

     elem.onkeydown = function (e)
 	{
  		return true;
 	}
}

The CheckLength(elem, num) function check how many characters are entered in the text area. 

var flag=0;  //flag to display message only once

// The checklength function
function CheckLength(elem, num){

  if(elem.value.length > num)
  {
     // if user typed excessive characters then truncate them to the allowed length.
     elem.value=elem.value.substring(0,num);

     var text="You reach the limit of " + num;

        if(flag==0)    //to display message once
        {

      noty({
              text: text,
              layout: 'center',

              animation: {
                open: 'animated flipInX', // Animate.css class names
                close: 'animated flipOutX', // Animate.css class names
                easing: 'swing', // unavailable - no need
                speed: 500 // unavailable - no need
            },

              closeWith: ['click'],
              timeout: 2500,
              type: 'success'
         });
                flag++;   // increase flag to stop the message from displaying
         }
             //if text is too long disable keys
             if(elem.value.length >= num)
             disablekeys(elem.id);
    }
    else
    {
    //if user using backspace removes some text then enable all keys
    if(elem.value.length < num)
    enablekeys(elem.id)

    flag=0;
   }
}

This is the HTML form:

<form name="myform" method="post" action="act_save_note.php"> <div><textarea name="note" id="note" style="width:100%; height:200px;" onchange="CheckLength(this,25);" onkeyup="CheckLength(this,25);" placeholder="Enter a note"></textarea></div> <div style="text-align:center;"><input type="submit" name="submit" id="submit" value="Save" onclick="return ValidateForm();"/></div>

To use noty.js you have to include noty.js and Jquery reference to you web page between <head> and </head> tags as in the picture below.

For animation, you have include Animate.css.

<head>
header code
</head>

JavaScript code with Class

 //class valid
 var valid= {

validateForm: function ()
{
    //if textarea is blank - display message
    if($('#note').val()=="")
    {
       var text="Please enter your note!";

       noty({
              text: text,
              layout: 'center',

              animation: {
                open: 'animated flipInX', // Animate.css class names
                close: 'animated flipOutX', // Animate.css class names
                easing: 'swing', // unavailable - no need
                speed: 500 // unavailable - no need
            },

              closeWith: ['click'],
              timeout: 2500,
              type: 'success'

         });

         return false;
    }
    else
    return true;
},

// disable all keys except backspace key using element id
disablekeys: function(myid)
{

var elem=document.getElementById(myid);

 	 elem.onkeydown = function (e)
 	{
  		if(e.keyCode !== 8)
  		return false;
 	}

},

//enable all keys using element id
enablekeys: function(myid)
{

var elem=document.getElementById(myid);

     elem.onkeydown = function (e)
 	{
  		return true;
 	}
},

flag:0, //flag to display message only once

// The checklength function
CheckLength: function(elem, num){

  if(elem.value.length > num)
  {
     // if user typed excessive characters then truncate them to the allowed length.
     elem.value=elem.value.substring(0,num);

        var text="You reach the limit of " + num;

        if(flag==0)    //to display message once
        {

      noty({
              text: text,
              layout: 'center',

              animation: {
                open: 'animated flipInX', // Animate.css class names
                close: 'animated flipOutX', // Animate.css class names
                easing: 'swing', // unavailable - no need
                speed: 500 // unavailable - no need
            },

              closeWith: ['click'],
              timeout: 2500,
              type: 'success'
         });

                flag++;   // increase flag to stop the message from displaying
         }
             //if text is too long disable keys
             if(elem.value.length >= num)
             this.disablekeys(elem.id);
    }
    else
    {
    //if user using backspace removes some text then enable all keys
    if(elem.value.length < num)
    this.enablekeys(elem.id)

    flag=0;

   }

}

};

To call class functions:

onclick="return valid.validateForm();"

onchange="valid.CheckLength(this,25);"

onkeyup="valid.CheckLength(this,25);"