表单验证消息（动态）

Question

有没有办法动态告知哪些.input尚未输入？在下面的代码中，您可以看到，如果我按顺序输入，#message  仅计算已填充的输入数量，并在numValid == 1, 2, 3, etc下显示按顺序列出的消息。

是否可以更改代码以动态显示尚未填充的.inputs的消息？

*****示例：如果我输入Last Name和Student ID字段，该消息将告诉我输入First Name或City字段等等，直到它们全部填充并显示最后一次验证（成功消息）*****

＆＃13;

＆＃13;

$("#form input").keyup(function() {
  var numValid = 0;
  $("#form input[required]").each(function() {
    if (this.validity.valid) {
      numValid++;
    }
  });

  var progress = $("#progress"),
    progressMessage = $("#message");

  if (numValid == 1) {
    progress.attr("value", "25");
    progressMessage.text("Please Enter the First Name.");
  }
  if (numValid == 2) {
    progress.attr("value", "50");
    progressMessage.text("Please Enter the Last Name.");
  }
  if (numValid == 3) {
    progress.attr("value", "75");
    progressMessage.text("Please Enter a City.");
  }
  if (numValid == 4) {
    progress.attr("value", "100");
    progressMessage.text("You're done, post!");
  }
});

＆＃13;

#mainformdiv {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 1px solid;
  border-radius: 10px;
}

#form {
  padding: 20px;
}

#progress {
  width: 460px;
  height: 25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainformdiv">
  <form id="form">
    <div id="progressdiv">
      <progress max="100" value="0" id="progress"></progress>
      <div id="message">Progress Message...</div>
    </div>
    <div class="input">
      <label for="userid">Student ID</label><br>
      <input id="userid" required="required" type="text">
    </div>
    <div class="input">
      <label for="firstname">First Name</label><br>
      <input id="firstname" required="required" type="text">
    </div>
    <div class="input">
      <label for="lastname">Last Name</label><br>
      <input id="lastname" required="required" type="text">
    </div>
    <div class="input">
      <label for="city">City</label><br>
      <input id="city" required="required" type="text"></br>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

易于完成，只需遍历所有必填字段，并将其ID加入字符串。如果要显示更好看的名称，只需先将ID映射到对象。

＆＃13;

＆＃13;

$("#form input").keyup(function() {
  var numValid = 0;
  $("#form input[required]").each(function() {
    if (this.validity.valid) {
      numValid++;
    }
  });
  
  var progress = $("#progress"),
    progressMessage = $("#message");

const invalidInputs = Array.from(document.querySelectorAll('#form input[required]'))
  .filter(input => !input.validity.valid)
  .map(input => input.id);
  
  progress.attr("value", numValid * 25);
  if (numValid == 4) {
    progressMessage.text("You're done, post!");
  } else {
    progressMessage.text('Please fill out the following fields: ' + invalidInputs.join(', '));
  }
});

＆＃13;

#mainformdiv {
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 1px solid;
  border-radius: 10px;
}

#form {
  padding: 20px;
}

#progress {
  width: 460px;
  height: 25px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainformdiv">
  <form id="form">
    <div id="progressdiv">
      <progress max="100" value="0" id="progress"></progress>
      <div id="message">Progress Message...</div>
    </div>
    <div class="input">
      <label for="userid">Student ID</label><br>
      <input id="userid" required="required" type="text">
    </div>
    <div class="input">
      <label for="firstname">First Name</label><br>
      <input id="firstname" required="required" type="text">
    </div>
    <div class="input">
      <label for="lastname">Last Name</label><br>
      <input id="lastname" required="required" type="text">
    </div>
    <div class="input">
      <label for="city">City</label><br>
      <input id="city" required="required" type="text"></br>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;