Question

我有一个旧的MVC3项目，并注意到一个文本字段的CSS在输入后正在改变。验证后，文本字段似乎丢失了CSS或类。

以下是我用来缩小问题范围的代码：

布局

<!DOCTYPE html />
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>@ViewBag.Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=8"/>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>
<body>
    @RenderBody()
    <script src='@Url.Content("~/Scripts/jquery.validate.min.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")' type="text/javascript"></script>
</body>
</html>

查看

<h2>DummyView</h2>

<p>No Class</p>
<input type="text" />

<p>With Class But Outside Form</p>
<input type="text" class="big-text-field" />

@using (Html.BeginForm())
{
    <p>With Class Inside Form</p>
    <input type="text" class="big-text-field" />
}

CSS

input[type="text"][class="big-text-field"]
{
    width: 400px;
}

.field-validation-valid
{
    display: none;
    font-family: Arial;
}

在输入和失去焦点后，在表单外添加了big-text-field类的字段保持400px。表单内的字段以400px开头，但在输入和失去焦点后返回到表单外的无类字段的大小。如果我从布局或.field-validation-valid CSS中删除验证脚本，它将不再更改。

为什么会这样，有没有办法阻止它？

提前感谢您的任何建议。

Answer 1

我的愚蠢错误。

在验证字段后，它会向其添加“有效”类，因此该类不再等于“big-text-field”，而是“big-text-field valid”

将CSS更改为固定它：

.bigtextfield
{
    width: 400px;
}

.field-validation-valid
{
    display: none;
    font-family: Arial;
}

为什么在mvc3中进行不显眼的验证后输入CSS会发生变化

1 个答案: