jQuery validation error message problem

Question

I want to display the error message generated by jQuery validation plugin at a specific place. How can i do that? For example I have 2 radio buttons, by default the plugin generates the error message next to first radio button (before the text "1 year". I want to display after the 2nd radio button (after the text "2 years". How can i do that?

HTML:

<div >  
    <label for="period">Select period</label>
    <div class = "radio-buttons">
        <input type="radio" name="period" > 1 year
        <input type="radio" name="period" > 2 years 
        <span class="error">Display error message here.</span>  
    </div>                          
</div>

I display error message in a span.

$("#test").validate({
            errorElement: "span",
    });

mariogl · Accepted Answer · 2011-06-30 11:51:57Z

2

Try this

$("#test").validate({
        errorElement: "span",
        errorPlacement: function(error, element) {
              error.appendTo(element.siblings("div.error"))
        }
});

And change your error container to a div, to avoid a span inside another span.

<div class = "radio-buttons">
    <input type="radio" name="period" > 1 year
    <input type="radio" name="period" > 2 years 
    <div class="error"></div>  
</div>

answered Jun 30, 2011 at 11:51

mariogl

1,3301 gold badge12 silver badges24 bronze badges

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

Comments

Gajendra Bang · Accepted Answer · 2011-06-30 11:40:08Z

1

Make sure you have appropriate elements like <div id="expiryyear"> etc in your code.

errorPlacement: function(error, element) {
    if (element.attr("id") == "expirymonth" || element.attr("id") == "expiryyear" )
            error.insertAfter("#expiryyear");
    else if (element.attr("id") == "cvv")
            error.insertAfter("#cvvError");
    else if (element.attr("id") == "opt_havecreditterms" || element.attr("id") == "opt_applyforcreditterms" )
            error.insertAfter("#credit-option-error");
    else if (element.attr("id") == "bankstate" || element.attr("id") == "bankzip" )
            error.insertAfter("#bankzip");
    else
            error.insertAfter(element);

}

answered Jun 30, 2011 at 11:40

Gajendra Bang

3,5732 gold badges29 silver badges32 bronze badges

Collectives™ on Stack Overflow

jQuery validation error message problem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related