Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The ASP.NET MVC3 validation works using both server-side and client-side methods. </p> <p>When you write server-side code to add validation messages to the rendered page (like in your helper method), the code is only invoked when the request is actually sent to the server, while the client-side validation, when enabled, prevents the request from being sent back to the server.</p> <p>Default implementation of MVC3 client-side validation works using a technique called Unobtrusive JavaScript validation, by adding some <code>data-</code> attributes to the page, and then finding and manipulating the marked elements in the JavaScript.</p> <p>For understanding the Unobtrusive JavaScript validation, try searching for it, there's a ton of resources out there. For example:</p> <p><a href="http://www.codeproject.com/KB/aspnet/CustomClientSideValidatio.aspx" rel="nofollow">http://www.codeproject.com/KB/aspnet/CustomClientSideValidatio.aspx</a></p> <p>In your case, when you want to specify where to display the validation message, you should mark the HTML element with a <code>data-valmsg-for</code> attribute. For example:</p> <pre><code>&lt;SPAN data-valmsg-for="id_of_the_input_to_validate"&gt;&lt;/span&gt; </code></pre> <p>The validation JavaScript will look for the above attribute and fill the <code>SPAN</code> with the validation message in case the input is not valid. Again, this happens before the postback of the form, so your server-side code that shows the validation message is never called, because the validation prevents the form from submitting.</p> <p>Here's a code snippet from the actual validation message helper included in the MVC3:</p> <pre><code>TagBuilder builder = new TagBuilder("span"); ... if (htmlHelper.ViewContext.UnobtrusiveJavaScriptEnabled) { builder.MergeAttribute("data-valmsg-for", modelName); builder.MergeAttribute("data-valmsg-replace", replaceValidationMessageContents.ToString().ToLowerInvariant()); } </code></pre> <hr> <p>Edit: Reply to your edited question:</p> <p>The first time the page is rendered, your first <code>if</code> is <code>true</code> (there is no validation error messages to render), thus you return an empty string. Your page will not have any of the <code>data-</code> attributes in it.</p> <p>You should render the <code>&lt;span data-valmsg-for="..."&gt;&lt;/span&gt;</code> all the time, even when you don't have any error messages, so that the JavaScript library knows where to put the error in case it happens on the client side.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload