jQuery Help

[kman1985]

I have a problem....all the labels of the .requiredField should turn red if they are not entered.  The label of the textarea isn't turning red because there is a <br/> tag after it.  I can't figure it out.  If someone could help me out that would be great.

 

 

PHP

 
 
<form action="" id="contactForm" method="post">



            <ol class="forms">



                <li id="name"><label for="contactName">*Name</label>

                    <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField contactName" />

                    <?php if($nameError != '') { ?>

                        <span class="error"><?=$nameError;?></span>

                    <?php } ?>

                </li><br/>



                <li id="email"><label for="contactEmail">*Email</label>

                    <input type="text" name="contactEmail" id="contactEmail" value="<?php if(isset($_POST['contactEmail']))  echo $_POST['contactEmail'];?>" class="requiredField contactEmail" />

                    <?php if($emailError != '') { ?>

                        <span class="error"><?=$emailError;?></span>

                    <?php } ?>

                </li><br/>



                <li id="website"><label for="contactWebsite">Website</label>

                    <input type="text" name="contactWebsite" id="contactWebsite" value="<?php if(isset($_POST['contactWebsite']))  echo $_POST['contactWebsite'];?>" class="contactWebsite" />

                    <?php if($emailError != '') { ?>

                        <span class="error"><?=$websiteError;?></span>

                    <?php } ?>

                </li><br/><br/>



                <li id="comments"><label for="commentsText">*Comments</label><br/>

                    <textarea name="commentsText" id="commentsText" rows="20" cols="30" class="requiredField commentsText"><?php if(isset($_POST['commentsText'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['commentsText']); } else { echo $_POST['commentsText']; } } ?></textarea>

                    <?php if($commentError != '') { ?>

                        <span class="error"><?=$commentError;?></span>

                    <?php } ?>

                </li>



                <li class="req">

                <label>*Required Field</label>

                </li>

                <br/>

</ol>

</form>
 

jQuery

jQuery('.requiredField').each(function() {

    if(jQuery.trim(jQuery(this).val()) == '') {
            jQuery(this).prev('label').css('color', 'red');
    }

}

[kman1985]

Can't figure out how to edit or delete the thread ...........

 

still doesn't work tho. If someone could help me out that would be great.


HTML:

<form method="post" id="contactForm" action="">

<ol class="forms">

    <li id="name">

        <label for="contactName">*Name</label>

        <input type="text" class="requiredField contactName" value="" id="contactName" name="contactName">

    </li>



    

    <li id="email">

        <label for="contactEmail">*Email</label>

        <input type="text" class="requiredField contactEmail" value="" id="contactEmail" name="contactEmail">

    </li>





    <li id="website">

        <label for="contactWebsite">Website</label>

        <input type="text" class="contactWebsite" value="" id="contactWebsite" name="contactWebsite">

    </li>







    <li id="comments">

        <label for="commentsText">*Comments</label>



        <textarea class="requiredField commentsText" cols="30" rows="20" id="commentsText" name="commentsText"></textarea>

    </li>



    <li class="req">

        <label>*Required Field</label>

    </li>





    <li class="inline"><input type="checkbox" value="true" id="sendCopy" name="sendCopy"><label for="sendCopy">Send a copy of this email to yourself</label></li>



    <li class="buttons"><input type="hidden" value="true" id="submitted" name="submitted"><button type="reset">Reset</button><button type="submit">Submit</button></li>

</ol>

</form>

jQuery:

jQuery(document).ready(function() {



    jQuery('form#contactForm').submit(function() {

    

        jQuery('.requiredField').each(function() {

            

                    if(jQuery.trim(jQuery(this).val()) == '') {

                jQuery(this).prev('label').css('color', 'red');

            }



        });

        });

});

[SinsOfCube]

Instead of

jQuery(this).prev('label').css('color', 'red');

use

jQuery(this).prevAll('label').css('color', 'red');

 

prev('label') only returns an element if the first previous sibling is a label, with prevAll('label') all previous siblings that are a label element are returned.

[Romero]

Even prevAll() isn't such a great idea. Too broad and not required when you can target the required label precisely.
 

<script>
$(document).ready(function() {
    $("form#contactForm").submit(function() {
        var err=false;
        $(".requiredField").each(function() {
            if($.trim($(this).val()) == "") {
                $("label[for='"+$(this).attr("id")+"']").css("color", "red");
                err = true;
            } else {
                $("label[for='"+$(this).attr("id")+"']").css("color", "black");
            }
        });
        if(err) return false;
    });
});
</script>

For each requiredField element, its id is the same as its associated label's for attribute, so just use that.
 
Note: The else condition is to set the label back to black from red if the required field is no longer empty on a subsequent form submission attempt. The err variable is to prevent form submission if any required fields are still empty.