验证消息的位置

Question

在我试图关注的this guide中，验证消息显示在右侧并且是红色的。我看起来很沉闷，在左边，如下图所示。

我已阅读并重读了我链接的指南，但我看不出他的代码和我的代码之间有任何重大差异。为什么我的Label和TextBox按照我创建它们的顺序显示，而我的验证消息显示在两者之间？

这是（我相信的）我的模型的相关部分

    [Required(ErrorMessage = "Required")]        
    [Display(Name="IP Address")]
    public string address { get; set; }

    [Required(ErrorMessage = "Required")]
    [Display(Name = "TCP Port")]
    public int port { get; set; }

和我的观点的相应部分。

<p>
    @Html.LabelFor(c => c.address):
    @Html.TextBoxFor(c => c.address)
    @Html.ValidationMessageFor(c => c.address)
</p>
<p>
    @Html.LabelFor(c => c.port):
    @Html.TextBoxFor(c => c.port)
    @Html.ValidationMessageFor(c => c.port)
</p>

我意识到对这些项目的典型验证会更加强大。就目前而言，我唯一关心的是他们没有把这个领域留空。

Answer 1

您是否尝试将此添加到主css文件中？

 .input-validation-error
 {
     border: 1px solid #ff0000;
     background-color: #ffeeee;
 }
.field-validation-error {
   background-color:white;
   border-radius:4px;
   border: solid 1px #333;
   display: block;
   position: absolute;
   top:0; right:0; left:0;
   text-align:right;
}

Answer 2

Input框以某种方式获得了属性float: right。默认情况下，验证消息向左浮动。通过删除Inputs的float属性，验证消息现在显示在Inputs的右侧。

此外，通过在项目运行时在浏览器中按F12，可以查看应用于元素的样式。此外，可以右键单击元素和“检查元素”。我至少在Chrome和IE10中确认了替代方案。

希望这个技巧可以帮助别人避免因为使用忍者CSS而导致MVC出现问题。

Answer 3

我遇到了类似的问题。我的第一个输入框的验证消息是右对齐，而所有其余的都是左对齐的。使用下面的代码更新我的样式表可以解决问题。

＆＃13;

＆＃13;

GetSeatedZeroPoseToStandingAbsoluteTrackingPose

＆＃13;

＆＃13;

＆＃13;