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.

Renan Araújo · Answer 1 · 2016-03-21T13:58:33.173

48

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

edited Mar 21 '16 at 13:58

answered Mar 18 '16 at 17:37

Renan Araújo

3,533
11
39
49

This is really helpful for me. I added ModelState.Clear() it's hide !! – TaiwanHotDog Jul 01 '20 at 03:06
Good one buddy (y) – sami ullah Feb 27 '21 at 17:41
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) – combatc2 Oct 07 '21 at 16:37
it also seems to happen when the controller GET action has a parameter, with the same name as a property in the model – symbiont Mar 29 '22 at 14:32

score 14 · Accepted Answer · answered Jan 23 '14 at 00:27

14

Set the validation style to:

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

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

answered Jan 23 '14 at 00:27

mnsr

12,337
4
53
79

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. – allencoded Jan 23 '14 at 00:34
7

Why on earth we need to do it manually. Why it's not handled by the framework itself. :-| – Unbreakable Aug 03 '17 at 19:40
This is most likely because the default Site.css was changed or is missing. – recursive_acronym May 09 '19 at 17:14

Jimmy Shaw · Answer 3 · 2017-11-17T17:09:25.817

2

.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.

edited Nov 17 '17 at 17:09

answered Nov 16 '17 at 19:55

Jimmy Shaw

1,097
1
12
19

Care to explain how this answers OP's question? – Nov 16 '17 at 22:21
1

This doesn't help the OP, but it helped me. Much appreciated! – Ed Gibbs Apr 17 '19 at 04:01
1

Me too. Thank you very much – Photonic Jan 19 '22 at 14:35

score 1 · Answer 4 · edited Apr 20 '17 at 08:15

1

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

edited Apr 20 '17 at 08:15

Robert

5,278
43
65
115

answered Apr 20 '17 at 08:07

Nitin

21
1

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

4 Answers4

Linked

Related