title: Show validation messages below the element with jquery unobtrusive in asp.net mvc3
body: <p>I need to show the validation messages below the element. </p>
  
  <p>I have tried adding the message like:</p>
  
  <pre><code>[Required(ErrorMessage = "&lt;br /&gt; UserName is required")]
  public string UserName { get; set; }
  </code></pre>
  
  <p>But the above required message is rendered as (where the validation messages is encoded):</p>
  
  <pre><code>&lt;input type="text" value="" tabindex="1" style="height:auto; width:280px;" size="40" name="UserName" maxlength="15" id="UserName" data-val-required="&amp;amp;lt;br /&amp;amp;gt; UserName is required" data-val="true" class="textfield"&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/n1KfQ.png" alt="Validation Message"></p>
  
  <p>If i remove the <code>&lt;br/&gt;</code> from the message of the Model, the validation message shows in two lines. Also i have tried adding the validation as below, but the validation message is not overriden as in the below validate method (overriding from "UserName is required" to "Enter username"):</p>
  
  <pre><code>$('#userSignInform').validate({
      rules:
          {
              UserName: { required: true },
              Password: { required: true }
          },
      messages:
          {
              UserName: { required: "Enter Username" },
              Password: { required: "Enter the Password" }
          },
      errorPlacement: function (error, element)
          {
              error.appendTo(element.parent("td").next("td"));
          }
  });
  </code></pre>
  
  <p>Whats the workaround need to be done to show the validation messages below the element and to override the model message with the jquery validate method?</p>