Form does not validate a field when it finds a closed div inbetween.

Question

Hi,

I am using the jQuery inline form validation to validate my form. my form structure is such that it is split into two columns. the second column just have the text area. while the first column have the rest of the field.

here is the code that i am using for form.

<h1 class="com-response">Leave a reply for this Article</h1>
    <div class="com-respond">
        <div class="w340">
            <span class="com-label">Name</span>
                <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" id="formID">
                <input type="text" id="author" name="author" class="validate[required,custom[onlyLetter]]"/>
                <span class="com-label">email</span>
                <input type="text" id="email" name="email" class="validate[required,custom[email]]"/>
                <span class="com-label">Phone</span>
                <input type="text" id="phone" name="phone" class="validate[required,custom[telephone]]"/>
                <span class="com-label">Location</span>
                <input type="text" id="location" name="location" class="validate[required,custom[onlyLetter]]"/>
            </div>
        <div class="w340">
                <span class="com-label">Comment</span>
                <textarea rows="10" id="comment" name="comment" class="validate[required,length[6,300]]"></textarea>
                <input type="submit" value="Add Comment *" id="submit" name="submit"/>
                </form>
                <span class="title_sub">* your email and phone will be private and confidential by clicking on submit button you agree to our <a href="#">TOS</a></span>
        </div>
</div>

the first column is being validated without any problem , but i am facing the problem with the second column. i.e text area.

the first and second column is wrapped with a div named w340. and in between the form element w340 is closed and opened again. the closing div is creating the problem. if i remove it, it validates the textarea too. but with the div closed it refuses to validate the field.

any type of help is appreciated.

thank you

EDIT : Here is the jquery i am using for this.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#formID").validationEngine({
})  
});
</script>

here is the link to the plugin i am using

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Answer 1

Your document isn't well-formed: your form starts inside one div and ends in another. Move the form opening and closing tags outside of the two divs, like so:

<h1 class="com-response">Leave a reply for this Article</h1>
    <div class="com-respond">
        <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post" id="formID">
            <div class="w340">
                <span class="com-label">Name</span>
                <input type="text" id="author" name="author" class="validate[required,custom[onlyLetter]]"/>
                <span class="com-label">email</span>
                <input type="text" id="email" name="email" class="validate[required,custom[email]]"/>
                <span class="com-label">Phone</span>
                <input type="text" id="phone" name="phone" class="validate[required,custom[telephone]]"/>
                <span class="com-label">Location</span>
                <input type="text" id="location" name="location" class="validate[required,custom[onlyLetter]]"/>
            </div>
            <div class="w340">
                <span class="com-label">Comment</span>
                <textarea rows="10" id="comment" name="comment" class="validate[required,length[6,300]]"></textarea>
                <input type="submit" value="Add Comment *" id="submit" name="submit"/>
                <span class="title_sub">* your email and phone will be private and confidential by clicking on submit button you agree to our <a href="#">TOS</a></span>
            </div>
       </form>
    </div>

While the browser may be able to make sense of your form, it's actually illegal to do things the way you've done them. It won't show, though, until you try to parse the HTML into a DOM tree -- which is exactly what jQuery does. Your form node can't live partially in one div node and partially in another.