Javascript find class

Javascript find class

本文关键字：class find Javascript      更新时间：2023-09-26

我试图为我的自定义表单创建一些javascript，而不使用jquery。我有几个输入。我想要的是找到这样做与javascript。

if ($(".text-field").hasClass("input-validation-error")) {
   $(".error").css("display", " block");
      }
   else if ($(".text-field").hasClass("valid")) {
      $(".error").css("display", " none");
   }
   else {
      $(".error").css("display", " none");
   }
}

但是我需要这个东西，这意味着它将它应用于特定的输入(this)语句是否可能，这是我的html

的一个例子
<div class="field-holder">
     <input id="name" name="name"/>
     <label for="name" class="error" style="display:none;">This field is required.</label>
</div>

自动应用类输入验证错误。

这就是纯javascript中的所有函数。源代码是jQuery.js和我自己的测试。

function hasClass(element, className) {
    if (element.classList) {
        return element.classList.contains(className);
    } else {
        return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
    }
}
function addClass(element, className) {
    if (!hasClass(element, className)) {
        if (element.classList) {
          element.classList.add(className);
        }
        else {
          element.className += ' ' + className;
        }
    }
}
function removeClass(element, className) {
    if (element.classList) {
        return element.classList.remove(className);
    } else {
        return element.className = el.className.replace(new RegExp('(^|''b)' + className.split(' ').join('|') + '(''b|$)', 'gi'), ' ');
    }
}

function toggleClass(element, className) {
    if (hasClass(element, className)) {
        removeClass(element, className);
    } else {
        addClass(element, className);
    }
}

我知道你想要非jQuery的解决方案，但那代码是完全错误的开始。

$(".text-field").hasClass("input-validation-error")只查看第一个元素，它不查看每个元素。

使用

if ( $(".text-field.input-validation-error").length ) {
}

但问题是，您有多个错误字段，代码并不神奇地知道应该显示哪些元素。你的代码将显示/隐藏所有的，而不仅仅是那些有问题的。

为什么要使用JavaScript ?您可以使用CSS而不是JavaScript来显示错误消息。简单的CSS选择器就可以完成这项工作。

.text-field + label.error {
    display: none;
}
.text-field.input-validation-error + label.error {
    display: block;
}
相关文章：