jQuery Validation Plugin: Using Multiple errorLabelContainers

Question

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:

<div id="errorsSection">
    <div id="errorMessageLogin">
        <!-- Login Error Messages go here -->
    </div>                

    <div id="errorMessageSignup">
        <!-- 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">
            <!-- Login fields: email address and, password -->
        </div>

        <div id="signupFields" style="display:none">
            <!-- Signup fields: name, age, email address, and password -->
        </div>
    </form>
</div>

I'm using the jQuery Validation Plugin like this:

$("#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, in addition to the highlighting, 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?

guntars · Accepted Answer · 2010-11-11 17:42:22Z

0

You can use the errorPlacement callback inside your validate object to customize the placement of the created error labels. This function accepts two parameters: error and element. An example from jQuery docs ( http://docs.jquery.com/Plugins/Validation/validate):

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo( element.parent("td").next("td") );
   },
   debug:true
 })

answered Nov 11, 2010 at 17:42

guntars

3202 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bullines Over a year ago

I'm not certain how I can maintain the highlighting functionality that I have now, combined with the display of an error container based on errorMessageLogin or errorMessageSignup. I find the documentation for this plugin to be a little thin. Any ideas?

guntars Over a year ago

Why not? These are separate functions - one deals with error highlightning on the actual field where the error appears, and the other deals with the error message itself and it's placement.

user527066 Over a year ago

Would you mind taking a look at this question ?: stackoverflow.com/questions/4532009/…

Larry · Accepted Answer · 2010-11-12 21:51:21Z

0

I'm guessing you can't use two different forms? That would be an easier way to segregate the error message functionality? And just hide one form or the other?

answered Nov 12, 2010 at 21:51

Larry

1

Comments

Schenz · Accepted Answer · 2010-11-11 17:37:30Z

-1

This is not tested, but rather an idea to start you on the path...

$("#myForm").validate({
submitHandler: function (form) {
    MyWebService.DoWork(form);
},
rules: myRules,
errorLabelContainer: function () {
    var rdoValue = $("input[name='userAction']:checked").val();
    // branch and return the container based on value...
},
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);
}
});

answered Nov 11, 2010 at 17:37

Schenz

1,1138 silver badges14 bronze badges

2 Comments

Bullines Over a year ago

errorLabelContainer cannot be a function; as I mentioned, it must be a jQuery object.

Schenz Over a year ago

Sorry, you are right I see that now. In that case use of the errorPlacement seems to be the best way to resolve this...

Collectives™ on Stack Overflow

jQuery Validation Plugin: Using Multiple errorLabelContainers

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related