javascript - 当使用 JQuery 更正错误时，输入字段突出显示绿色

Question

我正在处理一个表单，当输入字段为空时，单击打印按钮进行打印时，应返回 false 并将字段突出显示为红色。同时，当输入字段具有值时，该字段应突出显示绿色，但这并不像应有的那样工作。如果一个字段有值而其他字段没有；单击按钮进行打印时，有值的字段应突出显示为绿色，其他没有值的字段应突出显示为红色。

Javascript

if (err !== 0){
$("#one, #two, #three, #four").effect("highlight", {color:"red"},
3000);
    $.notify("All fields with * must be filled", {
        position: 'bottom right',
        autoHide: true,
        autoHideDelay: 5000
    });
return false;
}
else {
  if ($("#one") !== "" && $("#two, #three, #four") == ""){
    $("#one").effect("highlight", {color:"green"}, 3000);
    return false;
}
if ($("#two") !== "" && $("#one, #three, #four") == ""){
    $("#two").effect("highlight", {color:"green"}, 3000);
    return false;
}
if ($("#three") !== "" && $("#one, #two, #four") == ""){
    $("#three").effect("highlight", {color:"green"}, 3000);
    return false;
}
if ($("#four") !== "" && $("#one, #three, #two") == ""){
    $("#four").effect("highlight", {color:"green"}, 3000);
    return false;
}
var print = true;
}

Answer 1

我在这个 fiddle 中举了一个例子，我没有使用您的确切代码，但这是其背后的想法。

$("button").click(function() {
  $("input").each(function() {
    if ($(this).val() == "") {
      $(this).css("border", "2px solid red");
    }
  });
});

$("input").change(function() {
  if ($(this).val() !== "") {
    $(this).css("border", "2px solid green");
  }
})

.form {
  width: 200px;
  height: 100%;
  border: 2px solid #e5e5e5;
  background-color: lightblue;
}
label {
  margin-right: 20px;
}
input,
select {
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form">

  <label for="txtName">Name</label>
  <input type="text" id="txtName" />

  <label for="txtSurname">Surname</label>
  <input type="text" id="txtSurname" />

  <label for="txtSex">Sex</label>
  <select id="txtSex">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
  <br/>
  <button>
    Print!
  </button>

</div>