麻煩與顏色框和jQuery驗證在WebKit瀏覽器

Question

我使用jQuery 1.4.2彩盒（http://colorpowered.com/colorbox/）和驗證（http://bassistance.de/jquery-plugins/jquery-plugin-validation/）插件在我的項目。我在Chrome（10.0.648.127測試版）和Safari（5.0.1）中遇到了問題 - 我的模式窗口的內容在驗證後不會刷新。我的意思是，當我在表單中輸入錯誤的值（在此模式窗口中）並驗證它時，錯誤消息不會出現。驗證正在工作，因爲我在控制檯中看到，valid（）方法返回良好的值。當我關閉我的模式，並再次打開（沒有刷新頁面），然後我看到錯誤消息。當然，爲了讓它消失，我必須輸入很好的價值，並且再次打開我的模式窗口。

在Firefox 3.6.13中，Opera 11.01和IE9 RC一切正常。

我的JS代碼：

$.colorbox({ 
      width: 1000, 
      scrolling: false, 
      inline: true, 
      href: '#userForm', 
      onComplete: function() { 
       $('#userForm').validate({ 
        rules: { 
         name: { 
          minlength: 4, 
          required: true, 
          remote: "ajax/ajaxUsers.php?ajaxMode=userExists" 
         }, 
         pass: { 
          minlength: 6, 
          required: true 
         }, 
         pass_2: { 
          equalTo: "#i_pass" 
         }, 
         email: "email" 
        }, 
        messages:{ 
         name: { 
          minlength: 'Nazwa użytkownika powinna mieć conajmniej {0} znaki', 
          required: "Nazwa użytkownika jest wymagana", 
          remote: "Ta nazwa jest już zajęta" 
         }, 
         email: "Proszę wpisać prawidłowy adres email", 
         pass:{ 
          minlength: 'Hasło powinno mieć conajmniej {0} znaków', 
          required: "Proszę wpisać hasło" 
         }, 
         pass_2: "Proszę powtórz hasło z powyższego pola" 
        }, 
        errorClass: "invalid", 
        errorElement: "em" 
       }); 
      } 
     }); 

我的HTML：

<div class="hidden"> 
<div id="userFormDialog" class="dialog"> 
    <div class="dialogHeader"> 
     <h2 class="modalButton">Dodaj Nowego Użytkownika</h2> 
    </div> 
    <div class="dialogContent"> 
     <form class="adminForm" action="users.php?act=add" method="post" id="userForm"> 
      <div class="col1"> 
       <fieldset> 
        <legend>Dane podstawowe:</legend> 
        <p><label for="i_name">Nazwa użytkownika*</label><input type="text" name="name" id="i_name" placeholder="Nazwa użytkownika" autofocus></p> 

        <p><label for="i_fullname">Pełna nazwa</label><input type="text" name="fullname" id="i_fullname" placeholder="Pełna nazwa"></p> 

        <p><label for="i_email">Adres email</label><input type="email" name="email" id="i_email" placeholder="Adres email"></p> 

        <p><input type="checkbox" name="status" id=i_status><label for="i_status">Aktywny?</label></p> 
       </fieldset> 
       <fieldset> 
        <legend>Autoryzacja</legend> 
        <p><label for="i_pass">Hasło*</label><input type="password" name="pass" id="i_pass" placeholder="Hasło"></p> 

        <p><label for="i_pass_2">Powtórz hasło*</label><input type="password" name="pass_2" id="i_pass_2" placeholder="Powtórz hasło"></p> 
       </fieldset> 
      </div> 
      <div class="col2"> 
       <fieldset> 
        <legend>Dostęp do Fotoware</legend> 
        <p><label for="i_fw_u">Użytkownik Fotoware</label><input type="text" name="fw_u" id="i_fw_u" placeholder="Użytkownik Fotoware"></p> 

        <p><label for="i_fw_p">Hasło Fotoware</label><input type="password" name="fw_p" id="i_fw_p" placeholder="Hasło Fotoware"></p> 
       </fieldset> 
       <fieldset class="accessLevel"> 
        <legend>Poziom dostępu</legend> 
        <label for="i_level">Wybierz poziom dostępu</label><select name="level" id="i_level"> 
       {foreach $userLevels as $level} 
        <option value="{$level@key}">{$level}</option> 
       {/foreach} 
       </select> 
        <ul> 
        {foreach $userPermissions as $perm} 
         <li><input type="checkbox" name="permissions[]" id="i_permissions" 
            value="{$perm@key}"><label 
           for="i_permissions">{$perm}</label></li> 
        {/foreach} 
        </ul> 
       </fieldset> 
      </div> 
     </form> 
     Pola oznaczone gwiazdka są obowiązkowe. 
    </div> 
    <div class="dialogFooter"> 
     <button class="modalButton" id="submitUserButton"> 
      Zapisz 
     </button> 
     <button class="modalButton closeDialog"> 
      Anuluj 
     </button> 
    </div> 
</div> 

任何想法，爲什麼偏偏沒有辦法嗎？

Answer 1

可能與您在第一次調用colorbox時使用相同的id（#userForm）創建另一個窗體有關。我會建議把colorbox放在iframe模式下。

Answer 2

嘗試登錄選擇用來添加錯誤消息

爲時髦的哥們說，它聞起來像一個多#ID問題