MVC Razor Validation Errors showing on page load when no data has been posted

Question

I'm messing around with data annotations. When I click on a link to go to a page, the validation messages are being displayed, but I would like to have the validation messages not show unless data has been posted.

View:

@Html.TextBoxFor(m => m.EmailAddress, new { @placeholder = "Enter Email", @class = "form-control" })
@Html.ValidationSummary(true, "Registration Failed. Check your credentials")
@Html.ValidationMessageFor(m => m.EmailAddress, "You must enter a valid Email Address.")

Model:

[Required(ErrorMessage = "Email is required")]
[DataType(DataType.EmailAddress)]
[EmailAddress]
[Display(Name = "Email Address: ")]
public string EmailAddress { get; set; }

Controller:

[HttpGet]
        public ActionResult AddUser()
        {
            return View();
        }

        [HttpPost]
        public ActionResult AddUser(UserCreateViewModel user)
        {
            if (ModelState.IsValid)
            {
                var success = UserRepository.AddUser(user);

                if (success)
                {
                    return View("Success");
                }
            }

            return View("AddUser");
        }

Like I said, my problem occurs on page load of the AddUser view. When I click on the link to view the AddUser page, validation messages are showing after it loads, yet at this point no data has been posted and the model is empty.

Saccharin

Answer 1

Set the validation style to:

.validation-summary-valid { display:none; }

So by default it's hidden. An error will trigger it to display.

Voyeurism

I was using a custom CSS file and had stop including the old Site.css reincluding this (which had your above fix) fixed my problem. – Saccharin

Why on earth we need to do it manually. Why it's not handled by the framework itself. :-| – Satterfield

This is most likely because the default Site.css was changed or is missing. – Jurassic

Answer 2

You can clear model state after binding user:

ModelState.Clear();

This happens because ModelBinder will set ModelState on binding. In every action that binds a model and returns a view with the same model you will have this problem.

[HttpPost]
public ActionResult AddUser(UserCreateViewModel user)
{
    if (ModelState.IsValid)
    {
        var success = UserRepository.AddUser(user);

        if (success)
        {
            return View("Success");
        }
    }

    ModelState.Clear(); // <-------
    return View("AddUser");
}

Cupro

This is really helpful for me. I added ModelState.Clear() it's hide !! – Sulcate

Good one buddy (y) – Unwashed

It may be worth mentioning that this will only happen for GET requests if the action receives an object with data annotations (as opposed to having arguments corresponding to the properties that were needed or an entirely different class w/o data annotations) – Hilel

it also seems to happen when the controller GET action has a parameter, with the same name as a property in the model – Manuscript

Answer 3

.field-validation-valid {
  display: none;
}

Whenever the validation triggers on page load, this ".field-validation-valid" value is automatically added to the class attribute of the triggered input element.

By adding CSS to display none as that particular class's value, you'll no longer see the validation messages on initial page load.

The validation messages will still display normally after the particular input element has been touched.

Autogenous

Care to explain how this answers OP's question? – Bimonthly

This doesn't help the OP, but it helped me. Much appreciated! – Insurrection

Me too. Thank you very much – Phagocytosis

Answer 4

$('.field-validation-error').html("");

Jenaejenda