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.

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.

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

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.

Answer 4

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