JQuery addClass 以一种非常奇怪的方式工作答案

【问题标题】：JQuery addClass working in a very odd mannerJQuery addClass 以一种非常奇怪的方式工作
【发布时间】：2017-07-11 16:07:24
【问题描述】：

我有一个包含 3 个输入的表单：2 个文本输入用于用户名和电子邮件，第三个密码输入用于（您猜对了）密码。

我在 JQuery 中验证这些输入字段，当输入为空或与其格式不匹配时，它会在输入中添加一个带有红色边框的类。代码如下：

if ($("input#username").val().length < 6) {
                $("input#username").addClass('input-error');
                next_step = false;
            } else if (!isEmail($("#email").val())) {
                $("#email").addClass('input-error');
                next_step = false;
            } else if (!isPassword($("#pwd").val())) {
                $("#pwd").addClass('input-error');
                next_step = false;
            }

            else {

                $(this).removeClass('input-error');
                next_step = true;
            }

它与用户名和电子邮件字段完美配合，如果密码字段为空，它也可以工作，但即使验证完美，如果密码不符合要求，addClass() 也不起作用（至少一个大写字母和一个数字）。

这是浏览器控制台显示的内容：

如您所见，它有点添加类，但实际上并非如此。怎么了？如果您需要 HTML 代码和/或 CSS 代码，请告诉我！

感谢您的关注！

编辑这是所要求的 HTML 和 CSS：

<fieldset>
                <div class="form-bottom">
                            <img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" />
                            <br>
                            <br>
                            <br>
                            <div class="form-group">
                                <label for="username"><h1>USERNAME:</h1></label>
                                <input type="text" class="form-control" id="username" placeholder="Enter username..." name="username">
                            </div>

                            <div class="form-group">
                                <label for="email"><h1>E-MAIL:</h1></label>
                                <input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email">
                            </div>
                            <div class="form-group">
                                <label for="pwd"><h1>PASSWORD:</h1></label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password..." name="pwd">
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button>
                            </div>
                        </div>
                    </fieldset>

和 CSS：

.form-control {
    height: 40px;
    border: 2px solid black;
    border-radius: 0;
    font-size: 14px;
}

.form-control:focus {
    border: 2px solid black;
    box-shadow: 0;
}
.input-error {
    border-color: #FF2859;
}

【问题讨论】：

我们需要 HTML 和 CSS 代码来帮助您。由于控制台显示该元素肯定具有该类，我的猜测是.input-error 类中的规则不够具体，无法覆盖您已经放置在元素上的任何样式。
@RoryMcCrossan 用其余代码编辑了主要问题。请记住，当它为空时，它在文本输入和密码输入上都被覆盖了。
请看我的 sn-p - 拥有minimal reproducible example 非常有用，尤其是当您有时在创建错误时发现错误（使用<> 按钮）
错误很可能在您的 isPassword 函数中。所以显示该函数的代码。 ;)
it kind of adds the class, but then not really 是什么意思？控制台肯定显示它已将类添加到输入中。

标签： javascript jquery html css validation

【解决方案1】：

这对我有用。

请评论如果您有这种设置仍然无法正常工作？

function isEmail(email) { // dummy example
  return email.indexOf("@")>1;
}
function isPassword(passwd) { // dummy example
  return passwd.indexOf("x")>=0; // must contain x
}

$(function() {
  $(".btn-next").on("click", function() {
    $(".form-group input").removeClass('input-error');
    var next_step = true,
    user = $("#username").val(),
    email = $("#email").val(),
    pwd=$("#pwd").val();
    if (user.length < 6) {
      $("#username").addClass('input-error');
      next_step = false;
    } else if (!isEmail(email)) {
      $("#email").addClass('input-error');
      next_step = false;
    } else if (!isPassword(pwd)) {
      $("#pwd").addClass('input-error');
      next_step = false;
    }
    console.log(next_step);
  });
});

.form-control {
  height: 40px;
  border: 2px solid black;
  border-radius: 0;
  font-size: 14px;
}

.form-control:focus {
  border: 2px solid black;
  box-shadow: 0;
}

.input-error {
  border-color: #FF2859;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<fieldset>
  <div class="form-bottom">
    <img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" />
    <br>
    <br>
    <br>
    <div class="form-group">
      <label for="username"><h1>USERNAME:</h1></label>
      <input type="text" class="form-control" id="username" placeholder="Enter username..." name="username">
    </div>

    <div class="form-group">
      <label for="email"><h1>E-MAIL:</h1></label>
      <input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email">
    </div>
    <div class="form-group">
      <label for="pwd"><h1>PASSWORD:</h1></label>
      <input type="text" class="form-control" id="pwd" placeholder="Enter password..." name="pwd">
    </div>
    <div class="text-center">
      <button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button>
    </div>
  </div>
</fieldset>

【讨论】：

【解决方案2】：

根据我从您发布的图片中看到的情况

我只能推测这是发生了什么。 [input#pwd.form-control.input-error] 行在打印到控制台时立即被评估。所以这意味着在那个时候，dom 中确实有 input error 类。但是，当您扩展它时，dom 会再次重新评估。那时，dom 的类input-error 被删除了，所以你再也看不到它了。我可以通过按顺序运行$('#pwd').addClass('input-error') 和$('#pwd').removeClass('input-error') 来证明这一点，如下图

基于此，我怀疑您在将类添加到 dom 后不久就删除了该类的代码中的另一个逻辑，很可能是$(this).removeClass('input-error');。

【讨论】：