Minimum characters in text area - how to?

Hi everyone

I have two text areas. I would like to prevent form submitting if the member does not enter at least 100 characters in each text area. There is no maximum number of characters, just the minimum (100 characters).

In case that he hit submit button I would like to display him a message that would inform him that he didn’t enter minimum requested characters.

It would be neat if I could have the character counter below of each text area which should be decreased with each entered character.

Anyone can help me to sort this problem?

Regards, Zoreli

Assign id=“message” to <textarea> and the following event to <form>:

onsubmit=“var text = document.getElementById(‘message’).value; if(text.length < 100) { alert(‘Message is too short.’); return false; } return true;”

Hi CyberAlien

I manage to achieve my first goal, that is to prevent submitting the form if the mamber enter less than 100 characters with following code:



<script type="text/javascript">
function CheckLength() {
    var msg_area = document.getElementById("Message");
    msg_area.innerHTML = "";
    if (document.getElementById("membershortdescription").value.length < 100) {
        msg_area.innerHTML = "YOU DID NOT ENTER ENOUGH INFORMATION";
        return false;
    } else document.getElementById("form3").submit();
}

</script>

<form action="mypage.php" name="form3" enctype="multipart/form-data" method="post" onsubmit="return CheckLength ()">

<textarea rows="8" cols="38" name="membershortdescription" id="membershortdescription" class="profileFormSelect"></textarea>

<input type='submit' value ='submit'>


</form>


Now I need to achieve my second goal, that is to display the decreasing character counter which should display 100 characters at the beginning and to decrease with each character entered in the text area.

Any advice?

Regards, Zoreli

Hi

I manage to solve the problem, and I am posting here the solution, so this post may be useful to someone in the future, if he has similar or same problem:

Here is the complete code:



<script type="text/javascript">
function CheckLength() {
    var msg_area = document.getElementById("Message");
    msg_area.innerHTML = "";
    if (document.getElementById("membershortdescription").value.length < 100) {
        msg_area.innerHTML = "YOU DID NOT ENTER ENOUGH INFORMATION";
        return false;
    } else document.getElementById("form3").submit();
}

function textCounter(membershortdescription, counterID, minLen) {
cnt = document.getElementById(counterID);

if (membershortdescription.value.length < minLen) {
 cnt.innerHTML = minLen - membershortdescription.value.length;
} else {
 cnt.innerHTML = "OK";
}

}

</script>


<form action="mypage.php" name="form3" enctype="multipart/form-data" method="post" onsubmit="return CheckLength ()">

<textarea rows="8" cols="38" name="membershortdescription" id="membershortdescription" class="profileFormSelect" onKeyUp="textCounter(this,'count_display',100);"  onBlur="textCounter(this,'count_display',100);"></textarea>
            <br />
            <span id="count_display">100</span>
            <span id="Message" style="color: #ff0000"></span>

<input type='submit' value='submit'>
</form>



Regards, Zoreli