jquery带覆盖的工具验证器

时间：2010-12-23 01:55:55

标签： javascript jquery-tools

我正在使用jQuery Tools表单对话框获得一些变体行为 - 即在叠加层中包含的表单上使用验证器。这是我的代码（应该直接加载）

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

此代码存在以下问题（按此问题的重要性顺序） -

  1. 在Chrome 8.0.552.231中，“必需”验证程序失败并不会停止提交的表单（在FF中也是如此）。
  2. 在Chrome中，错误消息与对话框无关，但显示在文档正文中，只有在对话框关闭后才会显示。
  3. 在Firefox 4b7中，无论初始化验证器时的位置设置如何，验证器错误都会显示在输入下方。它默认显示在右侧。
  4. 在FF中，form.reset（）不会重置表单（它在chrome中）。这可以通过在提交后第二次打开对话框来测试。乍一看似乎与jquery工具无关，但我认为我会把它扔进去:)。
  5. 在Chrome中，字段边框最初不是红色（在FF中）
  6. 在FF中，选中时字段边框不会变为蓝色（在Chrome中会显示）
  7. FF和Chrome的错误消息文本不同

    8. 其他人看到同样的行为？是否有可能修复该代码以按预期工作，并且在两个浏览器中模糊地相同？欢呼声，

1 个答案:

答案 0 :(得分：2)

这是我最初的尝试：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，设置错误div为9999固定
3.在Firefox 4b7中，无论初始化验证器时的位置设置如何，验证器错误都会显示在输入下方。它应默认显示在右侧 我不知道它是否是一个FF错误（不幸的是我没有FF 4），但我已将{ position: 'center right'添加到验证器以确保定位
4.在FF中，form.reset（）不重置表单（它在chrome中）。这可以通过在提交后第二次打开对话框来测试。乍一看似乎与jquery工具无关，但我想我会把它扔进:) 有一个隐藏的重置按钮可以完成工作并帮助$ form变量后
5.在Chrome中，字段边框最初不是红色（在FF中） 我的FF不是红色......
6.在FF中，选中时字段边框不会变为蓝色（在Chrome中为蓝色） 上述两点很可能与浏览器（+ OS主题）相关
7. FF和Chrome的错误消息文本不同 这里也一样..

相关问题
最新问题