MVC validation only border highlight without text error message - css

Question

Hello I would like to only highlight the border of the text box without any error message near it, I have tried the following, but it still adds a span tag, can I avoid adding a span tag? Thank you!
[Required(ErrorMessage = " ")]
[Display(Name = "Email")]
public string Email { get; set; }
view
#using (Html.BeginForm("Login", "Account", new {
ReturnUrl = ViewBag.ReturnUrl
}, FormMethod.Post, new {
#class = "navbar-form navbar-nav",
id = "userForm"
})) {
#Html.AntiForgeryToken()
<div class="form-group">
#Html.ValidationMessageFor(m => m.Email, "", new {
#class = "text-danger"
})
#Html.TextBoxFor(m => m.Email, new {
#class = "form-control input-sm",
#placeholder = "Email"
})
</div>
<div class="form-group">
#Html.ValidationMessageFor(m => m.Password, "", new {
#class = "text-danger"
}) #Html.PasswordFor(m => m.Password, new {
#class = "form-control input-sm",
#placeholder = "Password"
})
</div>
<input type="submit" value="Log in" class="btn btn-sm btnMain"/>
}
Before
1
After
2
Edit: Added view.

Answer 1

Decorate your Validation Summary with a class and add the style display:none; for that in CSS:
in View:
#Html.ValidationSummary("", new { #class = "text-danger hidevalidation" })
in CSS:
.text-danger .hidevalidation{
display:none;
}

Answer 2

What have worked for me is adding another class to ValidationMessageFor in order to disable the text message only in certain locations.
New view:
#using (Html.BeginForm("Login", "Account", new {
ReturnUrl = ViewBag.ReturnUrl
}, FormMethod.Post, new {
#class = "navbar-form navbar-nav",
id = "userForm"
})) {
#Html.AntiForgeryToken()
<div class="form-group">
#Html.ValidationMessageFor(m => m.Email, "", new {
#class = "text-danger nav-text-danger"
})
#Html.TextBoxFor(m => m.Email, new {
#class = "form-control input-sm",
#placeholder = "Email"
})
</div>
<div class="form-group">
#Html.ValidationMessageFor(m => m.Password, "", new {
#class = "text-danger nav-text-danger"
}) #Html.PasswordFor(m => m.Password, new {
#class = "form-control input-sm",
#placeholder = "Password"
})
</div>
<input type="submit" value="Log in" class="btn btn-sm btnMain"/>
}
They newly added class:
.nav-text-danger { display: none; }
in order to add the red border I have added/modified the following CSS class:
.input-validation-error { border: 2px solid #ff0000 !important; }
Special thanks to #stephen-muecke for helping me with this one