jquery - 如何在jquery中使用多个输入字段类名进行验证

Question

假设我有两个输入字段的表单

<input type="text" name="form-first-name" placeholder="name" class="form-first-name form-control require" id="name">
<input type="text" name="form-age" placeholder="age" class="form-first-name form-control require" id="age">

现在我想用 jquery 验证这两个输入字段。为此我正在使用

$('.registration-form input[class="require"]).on('focus', function() {
    $(this).addClass('input-error');
});

但是这里验证不起作用。但如果我用过

$('.registration-form input[id="name"]).on('focus', function() {
    $(this).addClass('input-error');
});

验证工作正常。

但是我想使用class，否则我需要验证每个id的输入字段。如果我可以使用class，我将更容易验证。

Answer 1

在第一种情况下，使用选择器input[class="require"]，您仅选择包含一个类require 的字段。并且您需要选择包含此类的字段。为此，请通过类使用调用:

$('.registration-form .require').on('focus', function(){
  $(this).addClass('input-error');
});

不要忘记最后的撇号。

或者您需要为需要验证的元素设置不同的通用类(如果 required 类不合适)。