Question

在表单上设置一些验证我已经看过以前的一些答案，并达到了以下目的：

CSS

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

如果发现某个字段为空/ null，我将添加该类：

的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颜色。为什么会这样？

ANSWER

似乎Input已经有了一些CSS规则来规定输入框的格式，但我假设在ovrerwrite中添加一个类这些规则会起作用，但它并没有。

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

Answer 1

如果我换入$（function（）{..}）和preventDefault：

，则适用

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

可以写

添加/删除

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

输入框边框未更改

1 个答案: