MVC4: An der Validierung Fehler auf, ändern Sie die textbox-Farbe rot

Ich habe ein Formular mit einigen Textfeldern, und wenn die textbox nicht enthalten, Gültiger Wert, bekomme ich die Fehlermeldung, aber die textbox-Farbe nicht rot ändern.

Dies ist, was ich haben

Modell

public class AddCompany
{
    public int Id { get; set; }

    [Required(ErrorMessage = "*Name is required")]
    public string Name { get; set; }

    [Required(ErrorMessage = "*Address is required")]
    [RegularExpression(@"^\(?([0-9]{4})\)?([A-Z]{2})",ErrorMessage = "*Not a valid Zip Code, Must be in format 1234AB")]
    public string Address { get; set; }

    [Required(ErrorMessage = "*Phone Number is required")]
    [DataType(DataType.PhoneNumber)]
    [RegularExpression(@"^\(?([0-9]{10})", ErrorMessage = "*Not a valid number, must be 10 numbers")]
    public string Phone { get; set; }

    [DataType(DataType.DateTime)]
    public DateTime DateTimeAdded { get; set; }
    public string Comment { get; set; }

}

Ansicht

@model CrmTestProject.Models.ViewModels.AddCompany

@{
    ViewBag.Title = "AddCompany";
    Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>

<h2>AddCompany</h2>
@Html.ValidationSummary(true)

<fieldset class="form-horizontal">
    <legend>New Company <small>Add</small></legend>
    @using (Html.BeginForm("AddCompany", "Company"))
    {
        <div class ="controls">
            <label class="label">@Html.Label("Name")</label>
            <div class="input-block-label">@Html.EditorFor(model=>model.Name)
                @Html.ValidationMessageFor(model=>model.Name)
            </div>
            <br/>
            <label class="label">@Html.Label("Address")</label>
            <div class="input-block-level">@Html.EditorFor(model=>model.Address)
                @Html.ValidationMessageFor(model=>model.Address)
            </div>
            <br/>
            <label class="label">@Html.Label("Phone")</label>
            <div class="input-block-level">@Html.EditorFor(model=>model.Phone)
                @Html.ValidationMessageFor(model=>model.Phone)
            </div>
            <br/>
            <div class="input-block-level">@Html.TextAreaFor(model=>model.Comment)</div>
        </div>
        <div class="form-actions" id="buttons">
            <button type="submit" class="btn btn-primary" id="Submit">Save changes</button>
            @Html.ActionLink("Cancel", "CompanyIndex", new { @class = "btn" })
        </div>
    }
</fieldset>

Browser-ScreenShot
MVC4: An der Validierung Fehler auf, ändern Sie die textbox-Farbe rot

Wie Sie sehen können, bekomme ich die Fehlermeldung, aber ich auch wollen, dass die Textfeld, und vorzugsweise Fehlermeldung, Farbe rot. Ich weiß nicht, ob es aufgrund von bootstrap.
Aber wenn ich diese blog für die Validierung Dinge funktionieren hier tadellos.
Kann mir jemand einen Vorschlag machen?

In der Zukunft, wenn Sie möchten helfen, mit JavaScript (client-side code), die Sie benötigen, um zu zeigen, das gerendert HTML-gesehen durch den browser (client), nicht der server! Dies ist jedoch nicht ein problem mit JavaScript oder jQuery Validierung, sondern nur ein Problem mit deinem CSS. Verwenden Sie Ihre DOM-inspection-tools, um zu sehen, welche CSS-Regeln angewendet werden, oder über-geschrieben, damit Sie wissen, wie um es zu korrigieren. Hinweis: .error ist die Standard - class verwendet der Validation-plugin.

InformationsquelleAutor Cybercop | 2013-10-10

  1. -1

    Fügen Sie eine Klasse in css, und ändern Sie seine Farbe wie diese:

    @Html.ValidationMessageFor(model=>model.Address),"*Address is required",new { @class = "redclass" })
    Dies wird sich ändern, die Botschaft, nicht der text box

    InformationsquelleAutor Giannis Paraskevopoulos

  2. 2

    einfach können Sie fügen Sie diesen css-code zu Ihrem Stil. keine Notwendigkeit zu ändern, js oder Ihre Ansichten. 

    input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error
{
    background: #FEF1EC;
    border: 1px solid #CD0A0A;
}

    InformationsquelleAutor matius

Schreibe einen Kommentar