jquery覆蓋工具驗證器

我收到了一些使用jQuery Tools窗體對話框的變體行爲 - 即在覆蓋圖中包含的表單上使用驗證器。這裏是我的代碼（應加載直線上升）jquery覆蓋工具驗證器

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Simple</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script> 

    <style type="text/css"> 
.dialog { 
    display: none; 
    width: 400px; 
    padding:5px; 
    background-color:rgba(178, 168, 79, 0.7); 
    border:2px solid #666; 
    border:2px solid rgba(82, 82, 82, 0.7); 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
} 

form { 
    background:#333; 
    padding:15px 20px; 
    color:#eee; 
    width:360px; 
    margin:0 auto; 
    position:relative; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
} 

form input { 
    border:1px solid #444; 
    background-color:#666; 
    padding:5px; 
    color:#ddd; 
    font-size:12px; 

    /* CSS3 spicing */ 
    text-shadow:1px 1px 1px #000; 
    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
} 

form input:focus  { color:#fff; background-color:#777; } 
form input:active { background-color:#888; } 

fieldset { 
border: 0; 
} 

.error { 
    height:15px; 
    background-color:#FFFE36; 
    font-size:12px; 
    border:1px solid #E1E16D; 
    padding:4px 10px; 
    color:#000; 
    display:none; 

    -moz-border-radius:4px; 
    -webkit-border-radius:4px; 
    -moz-border-radius-bottomleft:0; 
    -moz-border-radius-topleft:0; 
    -webkit-border-bottom-left-radius:0; 
    -webkit-border-top-left-radius:0; 

    -moz-box-shadow:0 0 6px #ddd; 
    -webkit-box-shadow:0 0 6px #ddd; 
} 

form label { 
    display:block; 
    font-size:13px; 
    color:#ccc; 
    padding-bottom: 2px; 
} 
    </style> 
</head> 

<body> 
<button type="button" name="dlgBtn">Show Dialog</button> 
<div class='dialog'> 
    <form class='form'> 
    <fieldset> 
     <label>Name</label> 
     <input name="name" type="text" required="required" /> 
    </fieldset> 

    <button type="submit">Submit</button> 
    </form> 
</div> 
</body> 

<script> 
$("button[name='dlgBtn']").click(function() { 
    $("form")[0].reset(); 
    $("div").data("overlay").load(); 
}); 

$("form").validator().submit(function() { 
    $("div").data("overlay").close(); 
    alert("Submitted OK!"); 
    return false; 
}); 

$("div").overlay({top:180, closeOnClick: true, mask: {color: '#fff', loadSpeed: 100, opacity: 0.5}}); 
</script> 
</html>

這段代碼有以下問題（按重要性排序這個問題） -

在Chrome中8.0.552.231，在「必要」驗證失敗並不會阻止提交的表單（它在FF中）。
在Chrome中，錯誤消息與對話框相關不可見，但出現在文檔正文中，並且只有在對話框關閉後纔會顯示。
在Firefox 4b7中，驗證器錯誤出現在輸入下面，無論初始化驗證器時是否有任何位置設置。它應該默認顯示在右邊。
在FF中，form.reset（）不會重置表單（它在chrome中）。這可以通過在提交後第二次打開對話框來測試。乍一看並不像jQuery的工具相關，但認爲我會把它扔在:)。
在Chrome中，當被選擇時的場邊界最初不是紅色（它是在FF）
在FF，場邊界不變成藍色（它在鍍鉻）
爲FF錯誤消息文本和鉻是不同的

其他人看到相同的行爲？是否有可能修復該代碼以按預期方式工作，並且在兩個瀏覽器中隱約相同？歡呼聲中，

來源

2010-12-23 hawkett

這裏是我的初步嘗試：example link

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Simple</title> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script> 

     <style type="text/css"> 
      #dialog { 
       display: none; 
       width: 400px; 
       padding:5px; 
       background-color:rgba(178, 168, 79, 0.7); 
       border:2px solid #666; 
       border:2px solid rgba(82, 82, 82, 0.7); 
       -moz-border-radius:6px; 
       -webkit-border-radius:6px; 
      } 

      form { 
       background:#333; 
       padding:15px 20px; 
       color:#eee; 
       width:360px; 
       margin:0 auto; 
       position:relative; 
       -moz-border-radius:5px; 
       -webkit-border-radius:5px; 
      } 

      form input { 
       border:1px solid #444; 
       background-color:#666; 
       padding:5px; 
       color:#ddd; 
       font-size:12px; 

       /* CSS3 spicing */ 
       text-shadow:1px 1px 1px #000; 
       -moz-border-radius:4px; 
       -webkit-border-radius:4px; 
      } 

      form input:focus  { color:#fff; background-color:#777; } 
      form input:active { background-color:#888; } 

      fieldset { 
       border: 0; 
      } 

      .error { 
       height:15px; 
       background-color:#FFFE36; 
       font-size:12px; 
       border:1px solid #E1E16D; 
       padding:4px 10px; 
       color:#000; 
       display:none; 
       z-index: 9999; 

       -moz-border-radius:4px; 
       -webkit-border-radius:4px; 
       -moz-border-radius-bottomleft:0; 
       -moz-border-radius-topleft:0; 
       -webkit-border-bottom-left-radius:0; 
       -webkit-border-top-left-radius:0; 

       -moz-box-shadow:0 0 6px #ddd; 
       -webkit-box-shadow:0 0 6px #ddd; 
      } 
      .error p {margin: 0} 
      form label { 
       display:block; 
       font-size:13px; 
       color:#ccc; 
       padding-bottom: 2px; 
      } 

      .hidden {display: none} 
     </style> 
    </head> 

    <body> 
     <button type="button" name="dlgBtn">Show Dialog</button> 
     <div id='dialog'> 
      <form id='form'> 
       <fieldset> 
        <label>Name</label> 
        <input name="name" type="text" required="required" /> 
       </fieldset> 
       <input type="reset" class="hidden" /> 
       <button type="submit">Submit</button> 
      </form> 
     </div> 
    </body> 

    <script> 
     $("button[name='dlgBtn']").click(function() { 
      $(":reset", "#form").click(); 
      $dialog.load(); 
     }); 

     // this is the object API and NOT the object itself! 
     var $form = $("#form").validator({ position: 'center right' }).submit(function(e) { 
      // Now this is the form object 
      var form = $(this); 

      // client-side validation OK. 
      if (!e.isDefaultPrevented()) { 
       // The ajax call; use the form object above to get the action attr, serialize..etc 
       // more: http://flowplayer.org/tools/demos/validator/server-side.html 
       //$.ajax({...}) 

       // BEGIN: THESE WILL GO IN THE SUCCESS METHOD OF THE AJAX CALL 
       alert("Submitted OK!"); 
       $form.reset(); 
       $dialog.close(); 
       // END: THESE WILL GO IN THE SUCCESS METHOD OF THE AJAX CALL 

       // THIS IS OUTSIDE THE AJAX CALL 
       e.preventDefault(); 
      } 
     }).data('validator'); 

     // this is the object API and NOT the object itself! 
     var $dialog = $("#dialog").overlay({top:180, closeOnClick: true, mask: {color: '#fff', loadSpeed: 100, opacity: 0.5}}).data("overlay"); 

     // Without this, Error messages will remain visible 
     $dialog.onBeforeClose(function(){ 
      $form.reset(); 
     }); 

     // This is to keep the error message next to it's corresponding input 
     $(window).scroll(function() { 
      $form.reflow(); 
     }); 
    </script> 
</html>

編輯：回答您的問題補充
1.在Chrome中8.0.552.231，在 '必要' 驗證失敗不會停止的形式被提交（它在FF中）。
現在確實
2.在Chrome中，錯誤消息與對話框相關不可見，但出現在文檔正文中，並且只有在對話框關閉後纔會顯示。
這是因爲你覆蓋了z-index的9998，錯誤格設置爲9999固定的
3.在Firefox 4B7，輸入下面出現的驗證錯誤，無論任何位置初始化驗證時設置的。它應該默認顯示在右邊。
我不知道這是否是一個錯誤的FF（可惜我不HV FF 4），但我已經添加到{ position: 'center right'驗證，以確保定位
4.在FF的form.reset（）不會重置表單（它在Chrome中）。這可以通過在提交後第二次打開對話框來測試。乍一看並不像jQuery的工具相關，但認爲我會把它扔在:)。
有一個隱藏的復位按鈕將做的工作，並幫助$表單變量後記
5.在Chrome中，場境最初不紅（這是在FF）
這不是我的FF紅色。 ..
6.在FF，現場邊框沒有選擇時變成藍色（它在Chrome）
最有可能在上述兩個點是瀏覽器（+ OS主題）相關
7.錯誤信息文本FF和Chrome是不同
它同樣在這裏..

來源

2010-12-25 12:20:53 ifaour

我已經改變了類的ID更快的訪問DOM – ifaour 2010-12-25 12:21:34

jquery覆蓋工具驗證器

回答

相關問題