输入框边框未更改

Question

在

表单上设置一些验证 我查看了一些以前的答案，并得出了以下结论：

.CSS

.required_field {
    border-style: solid;
    border-color: red;
}

当发现字段为空/空时，我正在添加类：

JavaScript

$('#new_name').addClass('required_field');

我已经在div 上测试了该类，它正确地添加了边框，但为什么它不改变input框的边框颜色？

.HTML

<form>
    <input type="text" id="new_name" name="new_name">
    <input type="submit">
</form>

我可以看到正在添加该类，但边框没有改变input box颜色。为什么会这样？

答

似乎Input已经有一些 CSS 规则来规定输入框的格式，但我假设添加一个类来编写这些规则会起作用，但事实并非如此。

通过在required_field类中每个规则的末尾添加 ！important(如注释中所建议的(，强制覆盖，因此边框颜色根据需要更改。

Answer 1

适用于

如果我包装在 $(function(( { .. }( 和 preventDefault：

在这里测试：https://jsfiddle.net/mplungjan/akavrx6y/因为SO不允许提交

$(function() {
  $("form").on("submit", function(e) {
    if ($.trim($('#new_name').val()) == "") {
      e.preventDefault();
      $('#new_name').addClass('required_field');
    } else {
      $('#new_name').removeClass('required_field');
    }
  });
});

.required_field {
  border-style: solid;
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="new_name" name="new_name">
  <input type="submit">
</form>

可以写入添加/删除

$('#new_name').toggleClass('required_field',$.trim($('#new_name').val()) == "");