SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validating dynamically generated textareas

    Hi all,

    I'm trying to work out how I would validate a form to ensure that all textareas have had something typed into them.

    The problem is though... the amount of textareas is unknown as they are dynamically generated using PHP and all look like this

    HTML Code:
    <textarea name="answer[]" rows="4"></textarea>
    I basically just need to loop through all the textareas to ensure that something was entered. Any pointers would be greatly appreciated.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Add this script to the bottom of the document, preferably in a .js file

    Code javascript:
    // attach validation event to the form
    document.getElementById('myForm').onsubmit = validateForm;
    function validateForm() {
        // Get all the textarea elements
        var textareas = document.getElementsByTagName('textarea');
        // Loop through each one
        var validationFailed = false;
        for (var i = 0; i < textareas.length; i++) {
            // if any have no content, this validation failed.
            if (textareas[i].value.length === 0) {
                validationFailed = true;
            }
        }
        // do something based on the results
        if (validationFailed) {
            // returning false cancels the submit
            return false;
        } else {
            // passed validation
        }
    }
    Last edited by paul_wilkins; Feb 24, 2008 at 14:04.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help so far Paul,

    I can't seem to get it to work though. I have also tried adding the onSubmit event to the top of the form but still no luck.

    Here's what I have got so far:

    Code HTML4Strict:
    <html>
    <head>
    <script type="text/javascript">
    document.getElementById('myForm').onSubmit = validateForm;
    function validateForm() {
        // Get all the textarea elements
        var textareas = document.getElementByTagName('textarea');
        // Loop through each one
        var validationFailed = false;
        for (var i = 0; i < textareas.length; i++) {
            // if any have no content, this validation failed.
            if (textareas[i].value.length === 0) {
                validationFailed = true;
            }
        }
        // do something based on the results
        if (validationFailed) {
            // returning false cancels the submit
    		alert("please complete all fields");
            return false;
        } else {
            // passed validation
        }
    }
    </script>
    </head>
    <body>
     
     
    <form method="post" action="" id="myForm">
    <textarea name="answer[]"></textarea>
    <textarea name="answer[]"></textarea>
    <textarea name="answer[]"></textarea>
    <input type="Submit" name="Submit" value="Submit"/>
    </form>
     
    </body>
    </html>


  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Place the code at the bottom of the body instead. Then all the page elements are instantly available for use, much fast than using any kind of onload events.

    You will also be using a technique advised by top JavaScript authors
    http://javascript.crockford.com/code.html
    http://developer.yahoo.com/performance/rules.html
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have moved it to the bottom now as you advised, but still can't get the alert message to appear if not all the fields are completed

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
     
     
    <form id="myForm" method="post" action="">
    <textarea name="answer[]"></textarea>
    <textarea name="answer[]"></textarea>
    <textarea name="answer[]"></textarea>
    <input type="Submit" name="Submit" value="Submit"/>
    </form>
     
    <script type="text/javascript">
    document.getElementById('myForm').onSubmit = validateForm;
    function validateForm() {
    alert("please complete all fields");
        // Get all the textarea elements
        var textareas = document.getElementByTagName('textarea');
        // Loop through each one
        var validationFailed = false;
        for (var i = 0; i < textareas.length; i++) {
            // if any have no content, this validation failed.
            if (textareas[i].value.length === 0) {
     
                validationFailed = true;
            }
        }
        // do something based on the results
        if (validationFailed) {
            // returning false cancels the submit
    		alert("please complete all fields");
            return false;
     
        } else {
            // passed validation
        }
    }
    </script>
    </body>
    </html>


  6. #6
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All sorted now.

    Was missing an 's' in the 'getElementByTagName' part, so should have read: getElementsByTagName

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mboy247 View Post
    All sorted now.

    Was missing an 's' in the 'getElementByTagName' part, so should have read: getElementsByTagName
    Thanks, the code sample that I provided has now been edited to reflect that correction.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •