Jquery 验证和消息

Question

我正在尝试在我的字段缺少输入时显示错误消息。一旦两者都填写完毕，我希望显示一条成功消息来代替#error。 不知道为什么我目前没有收到任何消息。

$("input[type='button']").click(function() {
  $("form").validate({
    rules: {
      username: "required"
    },
    messages: {
      username: "please enter a 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 for response if form data is correct/incorrect -->
  <p id="error"></p>
</form>

Answer 1

这个呢？

$("input[type='button']").click(function() {

    if($("#username").val()==""){
        $("#error").html("Please enter a name");
        return;
    }
    if($("#pw").val()==""){
        $("#error").html("Password required");
        return;
    }
    alert("Submitted");
});