javascript - Jquery Validation and Messages -

i'm trying error message show when fields missing input. once both filled in want success message show in place of #error. not sure why i'm not getting message currently.

$("input[type='button']").click(function() {    $("form").validate({      rules: {        username: "required"      },      messages: {        username: "please enter name"      }    });    alert("submitted");  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>  <form>    <p>      <label for="username">username:</label>      <input type="text" name="username" id="username">    </p>      <p>      <label for="pw">password:</label>      <input type="password" name="pw" id="pw">    </p>      <p>      <input type="button" value="submit">    </p>      <!-- placeholder response if form data correct/incorrect -->    <p id="error"></p>  </form>

what ?

$("input[type='button']").click(function() {      if($("#username").val()==""){         $("#error").html("please enter name");         return;     }     if($("#pw").val()==""){         $("#error").html("password required");         return;     }     alert("submitted"); });