CODEWITHSUNDEEP
javascriptjqueryformsvalidation
sunjie
sunjie

Reputation: 2053

jQuery validation error message problem

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",
    });

Upvotes: 0

Views: 2576

Answers (2)

mariogl
mariogl

Reputation: 1295

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>

Upvotes: 2

Gajendra Bang
Gajendra Bang

Reputation: 3583

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);

}

Upvotes: 1

Related Questions