Google Maps API v3，在动态调整大小的信息窗口中验证html表单

Question

我在使用jQuery验证插件的Google地图信息窗口中获得了一个HTML表单。当它显示错误消息时（我已经将它们移到了表单输入下），表单中的div溢出了信息窗口。

我读过类似问题的回复，但我没有得到任何解决方案的解决方案。

HTML形式：

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

;

的jQuery：

$('#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, 
      })}; 
    } 
}); 

Answer 1

第一：你必须确保新的内容将永远融入信息窗口（信息窗口不能比的地图大）

问题：当验证 - 插件修改内容，infoWindow的content_changed事件不会触发（但这是调整infoWindow的大小所必需的）

触发infoWindow的content_changed事件将不足以重置内容到cu infoWindow的rrent content-property（当你的插件修改内容时它没有改变）

所以你必须在插件修改标记之后设置内容，方法是将内容设置为infoWindow中的当前子树。听起来很复杂，但不是：

infowindowObject.setContent(document.getElementById('formDiv')); 

这不会有DOM的任何影响，但它会：

1. 设置信息窗口的内容属性的当前内容
2. 触发content_changed事件，因此应调整infoWindow的大小。