jqueryvalidation error appears in the textbox rather than label [duplicate]

Question

This question already has answers here:

Jquery Mobile Validation error position & selects (2 answers)

Closed 9 years ago.

I'm having what seems to be a slightly bizarre problem (I think so anyway!!). I'm creating a small jquery mobile webapp and decided to use jqueryvalidation http://jqueryvalidation.org/ to validate my form data. It works BUT the error appears inside the textbox that should be filled rather than underneath it.

Does anyone have any suggestions? jsfiddle here: http://jsfiddle.net/chJ8B/3/

$().ready(function() {      
        // validate new customer form
        $("#newCustomer").validate({

            errorPlacement: function(error, element) {
            error.insertAfter(element); // <- the default
        },

            rules: {
                surname: "required",
                phoneNumber: "required"


            },
            messages: {
                surname: "Please enter the surname/company name",
            }
    });
     });

<div class="ui-field-contain"><label for="surname">Company/Surname</label><input type="text" name="surname" id="surname"  ></div>
<div class="ui-field-contain"><label for="forename">Forename</label><input type="text" name="forename" id="forename" value=""></div>

Answer 1

It looks like because of jQuery mobile markup, try to insert the error element after the current element's parent

$("#newCustomer").validate({
    errorPlacement: function(error, element) {
        error.insertAfter(element.parent()); // <- the default
    },
    rules: {
        surname: "required",
        phoneNumber: "required"
    },
    messages: {
        surname: "Please enter the surname/company name",
    }
});

Demo: Fiddle

---

You may have to add some conditional placements based on the type of markup you are dealing with in certain situations

Answer 2

Update the error placement with this:

errorPlacement: function (error, element) {
  error.insertAfter(element.parent()); // <- the default
}