4

我的 jquery 表单有问题。如果您查看我正在创建表单的这个小提琴，您会注意到在创建输入字段然后删除之后，警报消息开始在下一个元素上弹出（低于它们最初放置的位置）。

澄清一下：如果用户尚未输入任何信息，则警报会在正确的位置弹出（以红色文本浮动到输入字段的右侧）。但是，如果用户输入了信息，然后将其删除，则 ajax 警报（“此字段为必填项”）会在下面应该出现的字段中的错误位置弹出。要查看问题，请正确输入所有字段，然后删除您的姓名。在电子邮件字段中弹出“此字段为必填项”的消息，但它属于名称字段。

控制验证的js是：

$(document).ready(function() {
    $('#commentForm').validate({
        submitHandler: function(form) {
            $.ajax({
                type: 'POST',
                url: 'process.php',
                data: $(this).serialize(),
                success: function(returnedData) {
                    $('#commentForm').append(returnedData);
                }
            });         
            return false;
        },
        errorPlacement: function(error, element) {
              error.insertAfter( element).position({
                  my:'right top',
                  at:'right top',
                  of:element          
              });
         }  
    }); 
});

编辑 1：使用 Jquery NoConflict 模式并没有解决这个问题。因为这两个插件如何协同工作似乎是一个问题。

编辑2：这个问题实际上有两种解决方案。一种是将 jquery UI 脚本包含在头部中，从而使其“位置”实用程序能够在“右上角”对齐错误消息。

正如其他一些贡献者所指出的，另一个解决方案是修改 css 以设置

form p {
  position: relative;   /* This ensures error label is positioned within the p tag */
}
label.error {  
  top: 0; /* This ensures that it lines up with the top of the input */
  right:90px; 
  color: red; 
  position:absolute;
}

感谢所有输入。

4

5 回答 5

3

问题部分在于 CSS 声明：

/* Begin first declaration for <label class="error" /> */
label.error {
    color: red;
    position:absolute;
}
/* Begin second declaration for <label class="error" />. Nothing inherently wrong with this, but a bit odd considering the simplified fiddle.*/
label.error {
    float: left;    /* Kinda replaces previously declared absolute position as "float" and "position" are kinda, but not really, mutually exclusive properties. */
    right: 30px;    /* Useless declaration (for now) as "right" is used wih "position" not "float". */
    color: #ff714d;
    position: absolute; /* Replaces previously declared float and makes the previously assigned "right" property useful again. */
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

由于position: absolute;是最后一个声明（在位置 v. float 声明中），因此元素是绝对定位的。

问题的第一部分是，由于top没有声明属性并且display标签的 是block，浏览器将顶部定位在下一行（这是顶部在静态流中的位置）。

问题的第二部分是，自从 afloat被声明后，浏览器仍然尝试访问float该元素（这再次导致浏览器将顶部定位在下一行）。

解决方案（到目前为止）是删除float声明并在样式中声明 a topof 。0label.error

label.error {
    color: red;
    position:absolute;
}

label.error {
    top: 0;     /* Replaces "float: left;" and fixes the display. */
    right:30px;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

或在单个声明中：

label.error {
    color: red;
    position: absolute;
    right: 30px;
    top: 0;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

将代码更新到此会出现最后一个问题，即所有错误消息现在都出现在文档的最顶部。

这是由position: absolute;声明引起的，因为绝对定位的元素从正常文档流中删除并（绝对）定位到最近的非静态定位的祖先元素。

在这种情况下，没有元素，因此<label class="error" />元素绝对定位到<body />. 因此，解决方案的最后一部分是使p元素非静态定位（因为这是错误应该绝对定位的位置）。

最终的 CSS：

p {
    position: relative;
}

label.error {
    color: red;
    position: absolute;
    right: 30px;
    top: 0;
    color: #ff714d;
    position: absolute;
    font-family: 'subhead', helvetica, verdana;
    letter-spacing: 1px;
    text-transform: lowercase;
}

更新（和工作）小提琴。

于 2012-03-17T00:15:33.773 回答
3

对我来说看起来像是一个样式问题（但同样，一切都会:)使用不正确的位置：绝对，顺便说一句，取消浮动：左 - http://jsfiddle.net/kmJ87/17/

如果你真的很喜欢 position:absolute （在完整的 css 中有更多的样式，比如一个漂亮的盒子消息？）你可以通过添加 position:relative 到父元素来修复它（在这种情况下是段落） - http:// jsfiddle.net/kmJ87/18/

于 2012-03-15T01:39:59.190 回答
2

jcps javascript 不应该对页面产生任何影响，因为它只定义了一个对象并且实际上并没有在任何地方使用（还）。当我摆弄代码时，即使 jcps javascript 被注释掉，我也遇到了问题。

浏览器似乎在段落中的标签布局方面遇到了问题，通过将段落更改为具有相对位置的 div 并将顶部 0px 添加到错误样式中，事情变得更加稳定。我注意到验证器仍然存在一些间歇性问题，可能是由一些小错误引起的。

这是我现在最终得到的版本：http: //jsfiddle.net/kmJ87/20/

于 2012-03-16T23:02:32.933 回答
1

我们可以通过两种方式声明document.ready方法

  1. $（文档）.ready（函数（）{

    // 我们的代码在这里

    }); 这里$ 是一个全局变量并引用 jQuery 对象。

  2. jQuery（文档）.ready（函数（$）{

    // 我们的代码在这里

    }); // 这里$ 是一个局部变量，引用jQuery对象。

检查此链接的第 5 点： http: //net.tutsplus.com/tutorials/javascript-ajax/14-helpful-jquery-tricks-notes-and-best-practices/

于 2012-03-13T11:07:04.963 回答
0

许多 JavaScript 库使用 $ 作为函数或变量名，就像 jQuery 一样。在 jQuery 的例子中，$ 只是 jQuery 的别名，所以所有功能都可以在不使用 $ 的情况下使用。如果我们需要在 jQuery 旁边使用另一个 JavaScript 库，我们可以通过调用 jQuery.noConflict(); 将 $ 的控制权返回给另一个库。

看这里的例子：

 jQuery.noConflict();
 (function($)
  {
     // your code goes here
 })
(jQuery);

试试看

于 2012-03-09T18:57:44.457 回答