CODEWITHSUNDEEP
javascriptjqueryhtmlvalidationforms
Alice
Alice

Reputation: 23

Validating an HTML form with onClick added form fields

I have a form I cobbled together with bits of code copied online so my HTML and Javascript knowledge is VERY basic. The form has a button that will add another set of the same form fields when clicked. I added some code to make it so that if the "Quantity and Description" field is not filled out, the form won't submit but now it just keeps popping up the alert for when the field's not filled out even if it is. Here's is my script:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'>
</script><script type='text/javascript'>
 //<![CDATA[ 
 $(function(){
 $('#add').click(function() {
var p = $(this).closest('p');

    $(p).before('<p> Quantity & Description:<br><textarea name="Quantity and Description" rows="10" 

cols="60"><\/textarea><br>Fabric Source: <input type="text" name="Fabric Source"><br>Style# & Name: <input 

type="text" name="Style# & Name"><br>Fabric Width: <input type="text" name="Fabric Width"><br>Repeat Information: 

<input type="text" name="Repeat Info" size="60"><input type="hidden" name="COM Required" /> </p><br>');
return false; 
});
 });
function checkform()
 {
var x=document.forms["comform"]["Quantity and Description"].value
if (x==null || x=="")
 {
 alert("Quantity & Description must be filled out, DO NOT just put an SO#!!");
 return false;
 }
}
 //]]> 
</script>

And here's my HTML:

 <form action="MAILTO:[email protected]" method="post" enctype="text/plain" id="comform" onSubmit="return 

checkform()">
<div>Please complete this worksheet in full to avoid any delays.<br />
<br />Date: <input type="text" name="Date" /> Sales Rep: <input type="text" name="Sales Rep" /> Sales Quote/Order#: <input type="text" name="SQ/SO#" /><br />
<br />Quantity &amp; Description: <font color="red"><i>Use "(#) Cushion Name" format.</i></font><br />
<textarea name="Quantity and Description" rows="10" cols="60">
</textarea>
<br />Fabric Source: <input type="text" name="Fabric Source" /><br />Style# &amp; Name: <input type="text" name="Style# &amp; Name" /><br />Fabric Width: <input type="text" name="Fabric Width" /><br />Repeat Information: <input type="text" name="Repeat Info" size="60" /><br /><font color="red"><i>Example: 13.75" Horizontal Repeat</i></font><br />
<br /><input type="hidden" name="COM Required" />
<p><button type="button" id="add">Add COM</button></p>
</div>
<input type="submit" value="Send" /></form>

How can I get it to submit but still check every occurence of the "Quantity and Description" field?

Upvotes: 2

Views: 2358

Answers (1)

Luke Dennis
Luke Dennis

Reputation: 14550

First, I would not use spaces in your input names, as then you have to deal with weird escaping issues. Use something like "QuantityAndDescription" instead.

Also, it looks like you're trying to have multiple fields with the same name. The best way to do that is to add brackets to the name, meaning the values will be grouped together as an array:

<textarea name="QuantityAndDescription[]"></textarea>

This also means the code has to get all the textareas, not just the first. We can use jQuery to grab the elements we want, to loop over them, and to check the values. Try this:

function checkform()
{
    var success = true;

    // Find the textareas inside id of "comform", store in jQuery object
    var $textareas = $("form#comform textarea[name='QuantityAndDescription[]']");

    // Loop through textareas and look for empty values
    $textareas.each(function(n, element)
    {
        // Make a new jQuery object for the textarea we're looking at
        var $textarea = $(element);

        // Check value (an empty string will evaluate to false)
        if( ! $textarea.val() )
        {
            success = false;
            return false; // break out of the loop, one empty field is all we need
        }
    });

    if(!success)
    {
        alert("Quantity & Description must be filled out, DO NOT just put an SO#!!");
        return false;
    }

    // Explicitly return true, to make sure the form still submits
    return true;
}

Also, a sidenote of pure aesthetics: You no longer need to use the CDATA comment hack. That's a holdover from the old XHTML days to prevent strict XML parsers from breaking. Unless you're using an XHTML Strict Doctype (and you shouldn't), you definitely don't need it.

Upvotes: 4

Related Questions