jQuery CSS 属性

Question

我使用 .css() 更改元素的边框颜色，每次我执行触发 jQuery 脚本的操作时，边框都会像预期的那样变化，但又会变回来一秒钟后。

这是代码:

$("#form1").submit(function() {
  if (!$('#foo').val().length) {
    $("#foo").css('border', '3px solid red');
  }
  $("#foo").css('border', '3px solid red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<div>
  <form id="form1" name="form1" method="post">
    <div class="textInput">
      PO: <input type="text" class="txtBox" name="foo" id="foo"><br /><br />
    </div>
    <input type="submit" name="Submit" value="Submit" />
  </form>
</div>

没有额外的 JS 或 css 文件。

Answer 1

在不知道但暗示这是某种形式的验证的情况下，停止提交页面的建议似乎是正确的 - 但对 Ebrahim 的回答的调整如下:

$("#form1").submit(function(e) {
  // do your validation
  if (!$('#foo').val().length) {
    // if it doesn't meet the constraints, do your things to highlight it
    $("#foo").css('border', '3px solid red');
    // then halt the submission process for the user to review
    e.preventDefault();
    // jump from control of this method so it doesn't continue
    return;
  }
  // otherwise, do anything else you need and allow the form to submit
});