Question

我希望如果必填字段保留为空白，那么它将显示一个错误并带有红色焦点，表明该字段是必填字段。如果我再次清除该行并按Enter，则不会在该字段上显示红色焦点。

$("*").filter(".required").on("change", function() {
  //console.log("filter change");
  var v = $(this).val();

  $(this).css("border", function() {
    if (v == "") {
      debugger;
      $(this).addClass("required");
      return "0px solid red";
    } else {
      console.log('hi');
      $(this).removeClass("required");
      return "5px solid black";
    }
  });
});

Answer 1

您的逻辑有效，但是您将错误显示的边框设置为0px，因此不会显示。如果设置了可见宽度，它将起作用。

话虽这么说，您可以做一些事情来改善这一点。首先直接选择.required元素。选择*然后过滤会浪费性能。另请注意，您可以根据提供的值的长度直接使用toggleClass()使用类来设置样式，而无需使用if条件。试试这个：

$(".required").on("change", function() {
  $(this).toggleClass('error', $(this).val().trim().length === 0);
});

input {
  border: 5px solid black;
}

.error {
  border: 5px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" required="true" class="required" />

如果输入字段为空，则必填字段应更改焦点

1 个答案: