Question

问候，

我遇到errorPlacement的问题，我正在尝试将错误消息放在字段旁边，但它出现在页面顶部。

任何建议如何解决这个问题??

这是我的代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="IMAM_APPLICATION.WebForm1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">


    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>

    <script src="js/jquery.validate.js" type="text/javascript"></script>


    <script type="text/javascript">

        $(document).ready(function() {
            $("#aspnetForm").validate({
                groups: {
                    username: "fname lname",
                    address: "address1 phone"
                },
                errorPlacement: function(error, element) {
                    if (element.attr("name") == "fname"
|| element.attr("name") == "lname")
                        error.insertAfter("#lastname");
                    else
                        error.insertAfter(element);
                },
                debug: true
            })
        });

    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

    <p style="height: 313px">


              <label style="position:absolute; top: 227px; left: 22px;">Your Name</label>
&nbsp;<input name="fname" value="Pete"
                  style="position:absolute; top: 226px; left: 102px;"/>
<input name="lname" id="lastname"
                  style="position:absolute; top: 264px; left: 95px;"/>
<input name="address1" style="position:absolute; top: 347px; left: 102px;"/>
<input name="phone" id="lastname"
                  style="position:absolute; top: 315px; left: 102px;"/>
<br/>
<input type="submit" value="Submit Name" style="position:absolute; top: 407px; left: 73px;"/>
<input type="submit" value="Submit Address"
                  style="position:absolute; top: 370px; left: 437px;"/>

    </p>




    </asp:Content>

Answer 1

这是因为你的所有元素都是绝对定位的。你不能在正常流程之外放置一个错误，除非它或它的容器也是绝对定位的。

要使用您想要的errorPlacement，您需要在元素上使用与position:absolute; top: 315px; left: 102px;不同的样式。一个绝对定位的布局，除非必要，它总是会在维护或插入内容时变得混乱。

在这种情况下接近你可以做类似的事情：

error.css({position:'absolute', top: '226px',left: '182px'})
     .insertAfter("#lastname");

但是......我会改变布局。

此外，您还有另一个具有相同ID的元素，请务必更新此ID，以便您的ID唯一：

<input name="phone" id="lastname"

errorPlacement的Jquery问题

1 个答案: