Question

I am using the JQuery Validation plug-in and my goal is for the labels of invalid fields to have the error class applied to it. I managed to do this, but my problem is that JQuery is overwriting the label’s existing class rather than appending the error class to it.

Here’s the JQuery:

<script src="<?php bloginfo('template_directory'); ?>/js/lib/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.js" type="text/javascript"></script>
<script>
    $(document).ready(function(){
        $("#profile-basic").validate({
            debug:true,
            highlight: function(element, errorClass, validClass) {
                $(element).addClass(errorClass).removeClass(validClass);
                $(element.form).find("label[for=" + element.id + "]")
                .addClass(errorClass);
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass(errorClass).addClass(validClass);
                $(element.form).find("label[for=" + element.id + "]")
                .removeClass(errorClass);
            }
        });
    });
</script>

The highlight and unhighlight options came off the JQuery web site. (http://docs.jquery.com/Plugins/Validation/validate)

Here’s the HTML – the elements in question are the label and select for categoryID:

<form method="post" action="" class="bullhorn" id="profile-basic">
    <div id="accordion">  <!-- Accordion is currently disabled -->
        <h3>Name*</h3>
        <div>
            <div class="twocol">
                <label for="firstName">First Name:*</label>
                <input type="text" id="firstName" name="firstName" class="required" />

                <label for="middleName">Middle Name:</label>
                <input type="text" id="middleName" name="middleName" />

                <label for="lastName">Last Name:*</label>
                <input type="text" id="lastName" name="lastName" class="required" />
            </div>
            <div class="twocol">
                <label for="categoryID" class="ownline">Please select your primary category:*</label>
                <select name="categoryID" id="categoryID" class="required">
                    <option value="">Category 1</option>
                    <option value="">Category 2</option>
                    <option value="">Category 3</option>
                    <option value="">Category 4</option>
                    <option value="">Category 5</option>
                    <option value="">Category 6</option>
                    <option value="">Category 7</option>
                    <option value="">Category 8</option>
                    <option value="">and so on</option>
                </select>
            </div> 
        </div><!-- name -->
    </div>
    <div class="buttons"><input type="submit" value="Save and Go to Work History"/><input type="submit" value="Save"/></div>
</form>

Note that accordion is currently disabled – commented out completely.

And the relevant CSS:

label { float:left; text-align:right; width:30%; margin:0 14px 14px 0; line-height:20px; font-weight:bold; }
input, select, textarea { float:left; width:63%; margin-bottom:14px; background:#eee; line-height:1; }
    input[type=submit],  input[type=reset] { float:right; display:block; width:auto; margin:20px 0 0 14px; }
input:focus, textarea:focus { background:#fff; }
input, textarea { padding:2px 4px; }
select option { text-transform:capitalize; }
textarea { height:49px; }

.ownline { text-align:left; width:100%; line-height:20px; font-weight:bold; margin-bottom:3px; }
    .ownline+input,  .ownline+select,  .ownline+textarea, .ownline+.fieldinstructions+select { width:100%; }

label.error { color:#8e082d; }
    label.error:before { content: "\00bb\00a0"; display:inline-block; text-indent:-10px; }
input.error { border:2px solid #8e082d; background-color:#fdf5f3; } 

When I submit the form (with no filled out fields so that errors are generated) The class ownline on the categoryID label is removed and replaced by the error class. At least it seems to be the case. When I view the pages’ source, the categoryID label looks like: below. (I removed the select options for brevity.)

<label for="categoryID" class="ownline">Please select your primary category:*</label>
<select name="categoryID" id="categoryID" class="required">
</select>

But in Firebug it looks like:

<label class="error" for="categoryID">Please select your primary category:*</label>
<select id="categoryID" class="required error" name="categoryID">
</select>

Interestingly, JQuery overwrote the existing class in the label, but appended to the existing class in the select.

In case this was a CSS specificity problem, I did test writing the ownline styles with label.ownline as the selector, but it didn’t solve it.

This is a WordPress site with Contact Form 7 installed, but I added a function to functions.php so Contact Form wouldn’t call its stuff on the page in question.

I’ve been Googling this for hours.

I’m definitely a JQuery noob. I’d love some help, but please speak slowly. 🙂

Thank you thank you,
Kim

Answer 1

$(document).ready(function(){
    $("#profile-basic").validate({
        debug:true,
        errorElement: "nothing", // <-- this works !! (or "div", or something else)
        highlight: function(element, errorClass, validClass) {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element.form).find("label[for=" + element.id + "]")
            .addClass(errorClass);
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element.form).find("label[for=" + element.id + "]")
            .removeClass(errorClass);
        }
    });
});

and I’m sure 😉

point is, the validate plugin has is own error management method, and by default it uses the nearest “label” it finds, here we tell this plugin module to look somewhere else to do it’s stuff.