Validating dynamically generated textareas

**mboy247** · Feb 22, 2008 17:36

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.

**paul_wilkins** · Feb 22, 2008 18:16

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
    }
}

**mboy247** · Feb 22, 2008 19:11

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>

**paul_wilkins** · Feb 23, 2008 02:23

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

**mboy247** · Feb 23, 2008 04:46

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>