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.

I am validating but I am not able to show the error message. Where exactly is the problem?.

```js
$(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");
  }
});
```

```html
<div data-role="content" style="padding: 15px;margin-top:21px">
  <p id="error"></p>
  <label for="text">First Name:</label>
  <input type="text" name="text" id="fName">
  <label for="text">Last Name:</label>
  <input type="text" name="text" id="lName">
  <a href="" data-role="button" id="button" onclick="dtlsSubmit()">SUBMIT</a>
</div>
```