asp文本框必填字段验证器消息定位答案

【问题标题】：asp textbox required field validator message positioningasp文本框必填字段验证器消息定位
【发布时间】：2015-03-31 01:27:05
【问题描述】：

我使用了 asp:RequiredFieldValidator 来验证文本框。它工作正常。但是我需要改变错误信息的位置。

<div class="form-group">
                <label for="txtGarageName" class="col-sm-2 control-label">Garage Name</label>
                <asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control" Width="50%" ID="txtGarageName"></asp:TextBox>
                      <asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server"
                      ControlToValidate="txtGarageName"
                      ErrorMessage="Garage name is a required field."
                      ForeColor="Red">
                  </asp:RequiredFieldValidator>
              </div>

当我使用此错误消息时，从标签正下方开始显示。我需要做的是让错误消息显示在文本框前面或将其与 TextBox 起点对齐，这意味着将其更向右对齐。我尝试过使用 css 代码以及放置

margin-left=""

我认为这是互联网上的解决方案。两者都不能正常工作。

【问题讨论】：

尝试对文本框使用class="span6"，对必填字段验证器使用相同的方法
在您的情况下为 col-sm-6 并在必填字段验证器中使用 display=dynamic
@AbhishekGhosh 没用。它将下一个控制器（嵌套线标签和文本框）推到右侧。不是错误信息。无论如何，这些必填字段验证器会破坏布局。您还有其他可用于验证目的的想法吗？
如果问题是错误消息不适合可用空间，最好的ErrorMessage 可能只是* 和ForeColor=Red
成功了。我没有在文本框中使用它，这就是它起作用的原因。谢谢@AbhishekGhosh

标签： html css asp.net requiredfieldvalidator

【解决方案1】：

为您的 TextBox 使用 col-md-6 或 span6 CSS 类将适合您

<asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control span6"  ID="txtGarageName"></asp:TextBox>

<asp:RequiredFieldValidator id="RequiredFieldValidator1" runat="server"
                          ControlToValidate="txtGarageName"
                          ErrorMessage="Garage name is a required field."
                          ForeColor="Red">
                      </asp:RequiredFieldValidator>

【讨论】：

虽然这解决了问题，但还是有一个失败。由于我的表单有更多的控制器（3 个类似的标签和文本框），它的布局被破坏了。仅当显示错误消息时布局才正常-@Abhishek Ghosh
您可以使用span 类来适应您的布局要求，每个跨度都有一个width 分配给它们。

【解决方案2】：

使用网格系统 http://getbootstrap.com/css/#grid-example-basic

如果您更喜欢简单（非引导）的解决方案，您仍应使用一些占位符以获得更好的格式。我发现的一个例子（不是我的） http://jsfiddle.net/dqC8t/1/

#wrapper {
width: 500px;
border: 1px solid black;
overflow: auto;
}
#first {
float: left;
width: 300px;
border: 1px solid red;
}
#second {
border: 1px solid green;
margin: 0 0 0 302px;
}

【讨论】：