javascript - 带有覆盖层的 jquery 工具验证器

Question

我正在使用 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>

此代码有以下问题（按对这个问题的重要性排序） -

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

其他人看到相同的行为？是否可以修复该代码以按预期工作，并且在两种浏览器中都大致相同？干杯，

score 2 · Accepted Answer

这是我的初步尝试：示例链接

<!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 错误（不幸的是我没有 hv FF 4），但我已经添加{ position: 'center right'到验证器以确保定位
4. 在 FF 中，form.reset() 不会重置表单（它在 chrome 中会）。这可以通过在提交后第二次打开对话框来测试。乍一看似乎与 jquery 工具无关，但我想我会把它扔进去:)。
有一个隐藏的重置按钮将完成这项工作并帮助 $form 变量后记
5. 在 Chrome 中，字段边框最初不是红色（它在 FF 中）
它在我的 FF 中不是红色...
6. 在 FF 中，字段选择时边框不变成蓝色（它在 Chrome 中）
很可能以上两点与浏览器（+ OS 主题）相关
7. FF 和 Chrome 的错误消息文本不同
这里是一样的..

javascript - 带有覆盖层的 jquery 工具验证器

1 回答 1

Related

Reference