添加 className 不适用于特定字段

Question

我有一个检查字段是否为空的函数。如果是，它将分配一个错误 class 将其涂成红色。它适用于我表单的所有领域，但只有一个领域。在那个上，它只是将 class 属性添加到没有任何值的元素。

这是我的功能

function validateEmptyPass(pass) {
    var a = $('#password-conf');
    var error = "";
    var fieldName;
    if (a[0].value.length === 0) {
        a[0].className ="errorField"
        error= "password field empty"
    } else {
        a[0].className = '';     
    }
    return error;

这就是元素发生的情况。

<input id="password-conf" name="passwordConf" rel="Password Confirmation" placeholder="password confirmation" type="password" maxlength="25" tabindex="5" class="">

它恰好发生在那个领域你知道为什么吗？

非常感谢！

Answer 1

由于您正在使用 jQuery，您可以使用 .addClass:

a[0].addClass("errorField");

https://api.jquery.com/addclass/

使用原生 JavaScript:

a[0].classList.add("errorField");

Answer 2

一定是有什么不一样的地方是错的。也许你的 class？请向我们展示 CSS 代码。

这是一个工作代码：

function validateEmptyPass(pass) {
  var a = $('#password-conf');
  var error = "";
  var fieldName;
  if (a[0].value.length === 0) {
    a[0].className = "errorField"
    error = "password field empty"
  } else {
    a[0].className = '';
  }
  return error;
}

.errorField {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password-conf" name="passwordConf" rel="Password Confirmation" placeholder="password confirmation" type="password" maxlength="25" tabindex="5" class="">

<input type="button" onclick="validateEmptyPass()" value="validateEmptyPass()" />

Answer 3

if (!a[0].value) {
        a[0].className ="errorField"
        error= "password field empty"
    } else {
        a[0].className = '';     
    }

添加 className 不适用于特定字段

adding className is not working on a particular field

html

javascript

css

classname