Hey there! I encountered a rather peculiar issue while working on my jQuery mobile webapp. I decided to implement jqueryvalidation for form validation, which is pretty neat, except for one hiccup - the error messages are showing up inside the input fields instead of below them. Any ideas on how to fix this? Check out my 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>