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覆盖工具验证器

回答

相关问题