Usage of ValidationMessageFor

Question

how can i check if the validation error exists for a model property - I am using validationmessagefor method to display the error message. How can i just show one error message at a time?. I

Here are model properties i have which m.CommunicationView.MobilePhone.Area m.CommunicationView.MobilePhone.Number

 <div class="fl">
   @Html.TextBoxFor(m => m.CommunicationView.MobilePhone.Area, new { @id = "personalDetailMobilePhoneAreaInput",  @class="customText wdt80 numericValue",type = "text",maxlength="2" })
   @Html.TextBoxFor(m => m.CommunicationView.MobilePhone.Number, new { @id = "personalDetailMobilePhoneNumberInput",  @class="customText wdt120 mrglft10 phnIE numericValue",type = "text",maxlength="8" })
   @Html.ValidationMessageFor(m => m.CommunicationView.MobilePhone.Area)
   @Html.ValidationMessageFor(m => m.CommunicationView.MobilePhone.Number)
</div>

Answer 1

Just add the ErrorMessage field as part of the [Required] decorator in your model. For example for number:

[Required(ErrorMessage = "Number is required")]
[StringLength(10, ErrorMessage = "Number can be no larger than 10 characters")]
public string Number { get; set; }

Answer 2

Sounds like you're talking about client-side validation. Each field is validated on it's own, so if it has errors, you're going to get an error message. No consideration is given to whether or not other fields also have error messages. From the jQuery Validation docs:

By default, forms are validated on submit, triggered by the user clicking the submit button or pressing enter when a form input is focused (option onsubmit). In addition, once a field was highlighted as being invalid, it is validated whenever the user types something in the field (option onkeyup). When the user enters something invalid into a valid field, it is also validated when the field loses focus (option onblur). (emphasis mine)

So, as long as the field has not been activated in some way, no error message will appear, but if it has been activate, and has errors, the message will appear. Again, this is on a field by field basis. However, if the problem is that it's "messing up the UI", you should probably just fix your UI to accomodate the messages. A good UI informs the user about all potential issues, so they don't waste their time in endless submit-and-try-again cycles.

Besides, you'd get the same with server-side validation, as when the view is returned because of model errors, all the errors for all fields will be displayed. Best to just accept this and make your UI more accommodating.

Answer 3

You need to include the correct jquery libraries that automatically show the error when the textbox / control loses focus. Put them in your layout page.

    @Scripts.Render("~/bundles/jqueryval")
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>  

Make sure those are called after your main call to the jquery library. Also make sure you have the bundles setup in AppStart/BundleConfig.cs

  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));  

Finally make sure your webconfig has this (Root web.config, not views/web.config) place it in your appSettings node

<add key="UnobtrusiveJavaScriptEnabled" value="true" />