JQuery 冲突 Ajax 验证消息返回位置答案

【问题标题】：JQuery Conflict Ajax Validation Messages Return LocationJQuery 冲突 Ajax 验证消息返回位置
【发布时间】：2012-03-27 03:33:58
【问题描述】：

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

澄清：如果用户尚未输入任何信息，则警报会在正确的位置弹出（以红色文本浮动到输入字段的右侧）。但是，如果用户输入了信息，然后将其删除，则 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;
}

感谢您的所有意见。

【问题讨论】：

标签： jquery css ajax forms errorplacement

【解决方案1】：

问题部分在于 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，浏览器将顶部定位在下一行（这是顶部的位置）将处于静态流中）。

问题的第二部分是，由于声明了float，浏览器仍然尝试float 元素（这再次导致浏览器将顶部定位在下一行）。

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

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;
}

Updated (and working) fiddle.

【讨论】：

是的，谢谢。 CSS 是解决此问题的一种方法该问题已通过添加 form p {position: relative;} 和 label.error {top: 0;} 得到解决
给了你赏金，但另一个人给出了答案，因为他是第一个指出这是一个 CSS 问题的人。我实际上是自己想出来的，但我很欣赏你提供的细节。谢谢

【解决方案2】：

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

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

这是我目前最终使用的版本：http://jsfiddle.net/kmJ87/20/

【讨论】：

【解决方案3】：

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

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

【讨论】：

只是为了澄清插件之间没有冲突jsfiddle.net/AstDerek/kmJ87/19

【解决方案4】：

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

$(文档).ready(function() {

//我们的代码在这里

}); 这里 $ 是一个全局变量，它引用了 jQuery 对象。
jQuery(document).ready(function($) {

//我们的代码来了

}); // 这里的 $ 是一个本地的 变量并且引用 jQuery 对象。

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

【讨论】：

感谢您的意见。你能告诉我你将如何编辑 jsfiddle 来解决这个问题吗？因为我实际上并没有在那个版本中使用 $(document).ready(function(){ 。
@NickB ：这不是 jQuery 的问题。这是 CSS 的一个问题。你有自定义的 CSS 类 label.error 。如果您评论这个类，您会发现一切正常（错误文本颜色可能为黑色，但错误显示在正确的位置）。

【解决方案5】：

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

在此处查看示例：

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

试试看

【讨论】：

您能否编辑 jsfiddle 以显示在这种情况下如何使用 noconflict？
noConflict 不是这个问题的解决方案，因为它似乎是由两个 jQuery 插件的交互引起的。为 $ 分配不同的值并不能解决此问题。谢谢你。任何其他想法都非常欢迎