My Google Maps info window contains an HTML form with the jQuery validation plugin, but I am facing issues with error messages overflowing the info window when displayed below the form input field.
I have searched for solutions to similar problems, but none of the suggestions have provided a satisfactory fix.
Below is the code for the HTML form:
<div id="formDiv">
<form action="addRow.php" method="post"id="htmlForm">
<fieldset>
<p id="contactP">
<label for="contact">Email:</label>
<input type="text" name="contact" id="contact"/> <br/>
</p>
<p id="dateP">
<label for="datepicker">Date:</label>
<input type="text" name="date" id="datepicker"/> <br/>
</p>
<p id="latP">
<label for="lat">Latitude:</label>
<input type="text" name="lat" id="lat" class="location"/> <br/>'+
</p>
<p id="lngP">
<label for="lng">Longitude:</label>
<input type="text" name="lng" id="lng" class="location"/> <br/>
</p>
<p id="descP">
<label for="desc" id="dos">Description of Sighting:</label> <br/>
<textarea name="desc" id="desc"></textarea><br/>
</p>
<input type="submit" class="button" id="submitBtn" value="Post Sighting!" onclick="postSighting();"/>'+
<p class="clear"></p>'+
</fieldset></form></div>
;
Below is the jQuery code:
$('#htmlForm').validate({
rules: {
contact: {required:true, email:true},
date: {required:true},
lat: {required:true},
lng: {required:true},
desc: {required:true},
},
messages: {
desc: 'Please be descriptive!'
},
errorPlacement: function(error, element) {
error.appendTo($('#' + element.attr('id') + 'P'));
if (element.attr('id') == 'desc') {
error.css({
text_align: 'center',
color: 'red',
padding: 45,
});
} else {
error.css({
color: 'red',
padding: 10,
margin:0,
})};
}
});