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的大小。