title: How to display the error message
body: <p>When I click the button I want to validate the fields and if there are any errors, I want to show user error message on top.</p>
  
  <p>I am validating but I am not able to show the error message. Where exactly is the problem?.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click', '#button', function() {
    var FirstName = $('#fName').val();
    alert(FirstName);
    var LastName = $('#lName').val();
  
  
    if (FirstName.val() == '') {
      $("#error").append("Please enter First Name");
    } else if (LastName.val() == '') {
      $("#error").append("Please enter Last Name");
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-role="content" style="padding: 15px;margin-top:21px"&gt;
    &lt;p id="error"&gt;&lt;/p&gt;
    &lt;label for="text"&gt;First Name:&lt;/label&gt;
    &lt;input type="text" name="text" id="fName"&gt;
    &lt;label for="text"&gt;Last Name:&lt;/label&gt;
    &lt;input type="text" name="text" id="lName"&gt;
    &lt;a href="" data-role="button" id="button" onclick="dtlsSubmit()"&gt;SUBMIT&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>