验证控件上的错误消息出现在错误的位置

Question

我有以下代码块

<asp:Label runat="server" AssociatedControlID="UserName">User name</asp:Label>
<asp:TextBox runat="server" ID="UserName" />
<asp:RegularExpressionValidator runat="server" ControlToValidate="UserName" ValidationExpression=".{3,50}"
    CssClass="field-validation-error" ErrorMessage="The user name field needs to be 3 to 50 characters." />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
    CssClass="field-validation-error" ErrorMessage="The user name field is required." />

RequiredFieldValidator的错误消息显示在RegularExpressionValidator的错误消息之后，请在屏幕截图下方查看我正在谈论的内容。我想在“用户名字段需要3到50个字符”的位置显示“需要用户名字段”。

Answer 1

这可以通过使用CSS来完成。

您只需在＆＃34; RequiredFieldValidator＆＃34;中添加 style =＆＃34; margin-left：-300px;＆＃34; 像

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName" style="margin-left:-300px;"
    CssClass="field-validation-error" ErrorMessage="The user name field is required." />

注意：

1）调整＆＃34; -300px＆＃34;达到你所需的长度。

2）此样式也可以在css类或id中给出。

3）不仅使用margin-left，而且我们可以通过在CSS中使用不同的技术来实现这一点。

有关CSS的更多信息：

http://www.w3schools.com/css/

http://html.net/tutorials/css/

Answer 2

ASP.NET验证控件具有属性Display，它定义了错误消息的显示方式以及“隐藏”输入的有效性。在您的情况下，您应该使用Dynamic值进行显示，因为它将display: none设置为有效的验证器，导致它们不占用页面的空间。

<asp:Label runat="server" AssociatedControlID="UserName">User name</asp:Label>
<asp:TextBox runat="server" ID="UserName" />
<asp:RegularExpressionValidator runat="server" Display="Dynamic" ControlToValidate="UserName" ValidationExpression=".{3,50}"
    CssClass="field-validation-error" ErrorMessage="The user name field needs to be 3 to 50 characters." />
<asp:RequiredFieldValidator runat="server" Display="Dynamic" ControlToValidate="UserName"
    CssClass="field-validation-error" ErrorMessage="The user name field is required." />

另请确保您的css课程field-validation-error未覆盖display或visibility css属性。

另外，我建议使用CompareValidator代替RegularExpressionValidator来控制用户输入的长度。