SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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;"

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    PHP 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

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    solved

    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:

    PHP 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(membershortdescriptioncounterIDminLen) {
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •