Validation Plugin: Multiple Error Containers

Validation Plugin: Multiple Error Containers

I have a form that, where depending on the selected value of the userAction radio group, either the loginFields or signupFields are shown.  Also, I have two error containers - errorMessageLogin and errorMessageSignup - to display error messages respective to the selected value of the userAction:

  1. <div id="errorsSection">
        <div id="errorMessageLogin">
            <span>Login Preamble Goes Here</span>
            <!-- Login Error Messages go here -->
        </div>              

        <div id="errorMessageSignup">
            <span>Signup Preable Goes Here</span>
            <!-- Signup Error Messages go here -->
        </div>
    </div>
    <div id="contentSection">Lorem ipsum dolor sit amet...</div>
    <div id="formSection">
        <form id="myForm">
            <input name="userAction" type="radio" value="login" checked="checked">Login</input>
            <br />
            <input name="userAction" type="radio" value="signup">Sign Up</input>

            <div id="loginFields" style="display:none">
                <fieldset id="loginForm">
                    <label for="emailLoginTextBox" class="ourFormLabels">Email<span>*</span></label>
                    <input id="emailLoginTextBox" name="emailLoginTextBox" type="text" class="ourTextControls" />

                    <label for="passwordLoginTextBox" class="ourFormLabels">Password<span>*</span></label>
                    <input id="passwordLoginTextBox" name="passwordLoginTextBox" type="password" class="ourTextControls" />
                </fieldset>
            </div>

            <div id="signupFields" style="display:none">

                <fieldset id="signupForm">
                   
                <table class="nameControls" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="firstName">
                            <label for="firstNameTextBox">First Name<span>*</span></label>
                            <input id="firstNameTextBox" name="firstNameTextBox" type="text" />
                        </td>
                        <td class="lastName">
                            <label for="lastNameTextBox">Last Name<span>*</span></label>
                            <input id="lastNameTextBox" name="lastNameTextBox" type="text" />
                        </td>
                    </tr>
                </table>

                <label for="emailAddressTextBox" class="ourFormLabels">Email<span>*</span></label>
                <input id="emailAddressTextBox" name="emailAddressTextBox" type="text" />
                   
                <label for="passwordTextBox" class="ourFormLabels">Password<span>*</span></label>
                <input id="passwordTextBox" name="passwordTextBox" type="password" />

                <label for="reEnterPasswordTextBox" class="ourFormLabels">Password (Again))<span>*</span></label>
                <input id="reEnterPasswordTextBox" name="reEnterPasswordTextBox" type="password" />
                </fieldset>                                             
            </div>
        </form>
    </div>

























































I'm using the jQuery Validation Plugin like this:

  1. $("#myForm").validate({
        submitHandler: function (form) {
            MyWebService.DoWork(form);
        },
        rules: myRules,
        errorLabelContainer: null, // how to determine at runtime?
        messages: myMessages,
        highlight: function (element, errorClass) {
            $(element).prev().addClass(errorIcon);
            $(element).addClass(errorClass);
            $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
        },
        unhighlight: function (element, errorClass) {
            $(element).prev().removeClass(errorIcon);
            $(element).removeClass(errorClass);
            $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        }
    });


















I highlight invalid fields by changing the elements class and add a small icon nearby; this works great.  However, I'd like to display the messages defined in myMessages in either errorMessageLogin or errorMessageSignup based on the selection in the userAction radio group.  However, it appears that the value of errorLabelContainer is to be a jQuery object and not a function, which is unfortunate, since I'd be able to determine which error to show in a function.

Is it possible somehow to toggle the error container to be used by the jQuery Validation plugin?  If not, how can I accomplish this?