title: How to get translated ModelState error message using jQuery in Asp.net Core 2?
body: <p>I'm trying to validate HTML forms in an Asp.net Core 2.0 application, using <a href="https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation#validation-attributes" rel="nofollow noreferrer">Data Annotations</a>, <a href="https://jqueryvalidation.org/" rel="nofollow noreferrer">jQuery Validation</a> and <a href="https://github.com/aspnet/jquery-validation-unobtrusive/" rel="nofollow noreferrer">jQuery Unobtrusive validation</a>, as strongly suggested by the docs. I also have some custom Javascript to display the error messages in a notification window.</p>
  
  <p>I have a model that looks like this:</p>
  
  <pre class="lang-cs prettyprint-override"><code>class Model
  {
      [Required(ErrorMessage = "Required")]
      [Display(Name = "Email")]
      [EmailAddress(ErrorMessage = "ValidEmail")]
      public string Email { get; set; }
  }
  </code></pre>
  
  <p>After many attempts, I got Asp.net to emit an <code>input</code> tag ready for validation with properly localized error messages:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input class="form-control input-validation-error" type="email" 
    data-val="true" data-val-email="L'adresse e-mail est invalide."
    data-val-required="Le champ E-mail est obligatoire." id="Email" 
    name="Email" value="test@example" aria-describedby="Email-error"&gt;
  </code></pre>
  
  <p>I have managed to get validation working client-side, <em>before</em> submitting the form. jQuery Validation correctly detects an empty field and I can display the message from <code>data-val-required</code> using Javascript. For the sake of completeness, I have something like this handling the message:</p>
  
  <pre class="lang-js prettyprint-override"><code>function onFormValidationFailed(e, args: JQueryValidation.Validator) {
      ErrorManager.clearErrors();
  
      for (var error in args.errorList) {
          ErrorManager.addError(args.errorList[error].message);
      }
  }
  
  $("form")
      .on("invalid-form.validate", onFormValidationFailed);
  </code></pre>
  
  <p>However, a value such as <code>test@example</code> is accepted by the client-side validation and so the form is submitted. The error is then caught by Asp.net model validation. In my action I can see that <code>this.ModelState.IsValid</code> is indeed <code>false</code> and, as you can see above, the field was correctly identified as having an error with the class <code>input-validation-error</code>.</p>
  
  <p>My problem is that I cannot figure out how to obtain the pertinent error message to display it.</p>
  
  <p>I tried to call <code>$("form").validate()</code> when the page is loaded to try to trigger validation, but I'm not getting any error messages. (Or at least the <code>invalid-form.validate</code> event is not being triggered.)</p>
  
  <p>As a fallback solution, I tried using <code>&lt;div asp-validation-summary="All"&gt;&lt;/div&gt;</code> to have Asp.net inject the error messages somewhere I could get them with Javascript. But this soon turned out to be a dead end because the message is not being localized!</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="validation-summary-errors" data-valmsg-summary="true"&gt;
      &lt;ul&gt;
          &lt;li&gt;ValidEmail&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And indeed, I checked on the server side and the <code>ModelState</code> collection does <em>not</em> contain the localized message.</p>
  
  <p>Can anyone help me find a solution where, upon coming back from the server with an invalid model state, I can get, via Javascript, the pertinent <em>localized</em> data annotation error messages so I can display them to the user? (Or suggest a better practice?)</p>