验证未通过时，输入和TextArea更改背景

Question

我的表单上有必需的输入字段。如果用户提交表单但未填写输入字段，则会收到验证错误。

目标 当ModelState不是有效时，我希望字段背景更改为红色。我怎样才能做到这一点？

我已尝试在我的CSS文件中添加 - 但是当我提交表单时，我注意到类输入验证错误没有添加到我的输入或textarea我的表单中。

.input-validation-error {
    border: 1px solid #ff0000 !important;
    background-color: #FF0000;
}

模型

public class userInfo
{
    [Required]
    [Display(Name = "first Name")]
    public string first_name { get; set; }
}

视图

@if (!ViewData.ModelState.IsValid)
{
    @Html.ValidationSummary(false, "", new { @class = "text-danger" })      
}

<input class="lbl-info" id="first_name" type="text" name="first_name" value="@ViewBag.first_name"/>

控制器

[HttpPost]
public ActionResult Index(User user)
{
    ...

    if (!ModelState.IsValid)
    {
        ViewBag.first_name = user.first_name;
    }   

    return ...
}