mercredi 27 avril 2016

Why does input CSS change after unobtrusive validation in mvc3

I have an old MVC3 project, and noticed one of the text field's CSS was changing after input. Text fields appear to lose their CSS or class after being validated.

Here's the code I've been using to narrow down the issue:

Layout

<!DOCTYPE html />
<html xmlns="http://ift.tt/lH0Osb">
<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>

View

<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;
}

The field with the big-text-field class added outside the form stays 400px after input and losing focus. The field inside the form starts out with 400px, but returns to the size of the classless field outside the form after input and losing focus. If I remove the validation scripts from layout, or the .field-validation-valid CSS, it no longer changes.

Why would this be, and is there a way to prevent it?

Thank you in advance for any advice.

Aucun commentaire:

Enregistrer un commentaire