jquery - How to display the error message -

when click button want validate fields , if there errors, want show user error message on top.

i validating not able show error message. problem?.

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

<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>

$(document).on('click', '#button', function() {    var firstname = $('#fname').val();    var lastname = $('#lname').val();        if (firstname == '') {//remove .val()      $("#fnameerror").show();    } else if (lastname == '') {//remove .val()      $("#lnameerror").show();    }  });

.error{        display:none    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div data-role="content" style="padding: 15px;margin-top:21px">    <p id="error"></p>    <span id='fnameerror' class='error'>please eneter first name</span>    <label for="text">first name:</label>    <input type="text" name="text" id="fname">    <span id='lnameerror' class='error'>please eneter last name</span>    <label for="text">last name:</label>    <input type="text" name="text" id="lname">    <a href="#" data-role="button" id="button" ">submit</a>  </div>

add span error message show if match condition