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

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" />