同时验证多个输入答案

【问题标题】：validating multiple inputs at the same time同时验证多个输入
【发布时间】：2013-12-28 18:23:39
【问题描述】：

我有三个文本输入：

名字
姓氏
用户名

在表单中，我只有这些输入类型：文本。
我希望它们中的每一个至少有 4 个字符长，所以我决定一起验证它们。
我想使用 Jquery 显示一条错误消息，当长度小于 4 时为红色，大于 4 时为绿色。我分别用以下ID放了三个错误消息：

长度
长度
超长

（第一个字母对应输入，例如名字：flength等）
所以这是我的代码：

$('input [type= text]').keyup(function ({
    var l = $(this).val();
    var x = l.id;
    x = x.charAt(0);
    x = '#' + x + 'length';
    if (l.length < 4) {
        $(x).removeClass('valid').addClass('invalid');
    } else {
        $(x).removeClass('invalid').addClass('valid');
    }
});

为什么这个脚本不起作用？我应该修改什么？
编辑
demo

【问题讨论】：

你说的“不起作用”是什么意思。发生什么了？你的控制台错误是什么？
@Sparky 你现在可以看到演示了
将第 3 行改为 var x = $(this).attr('id'); jsfiddle.net/3yqVg/2
谢谢大家的帮助，问题解决了。

标签： javascript jquery validation

【解决方案1】：

看到你的 cmets 之后

更改var x = $(this).attr("id"); 也无法解决问题

由于$(this).attr("id") 给出了您当前的元素ID，并且您的当前元素是您的输入标签元素，并且您没有设置id 属性，而是您已将其设置为div 标签，正如您在cmets 中提到的那样，因为您正在尝试检索尚未设置的 id 属性并且您收到错误。

我可以给出的一个解决方案是这样

<input type="text" name="flength"/> // set name attribute same as div ids
<input type="text" name="llength"/>
<input type="text" name="ulength"/>

 $('input[type=text]').keyup(function ({
    var l = $(this).val(); // get the input string
    var x = $(this).attr('name'); // get the current input element name attribute 
    if (l.length < 4) {
        $('#' + x).removeClass('valid').addClass('invalid');
    } else {
        $('#' + x).removeClass('invalid').addClass('valid');
    }
});

查看http://jsfiddle.net/Q2y8m/4/

【讨论】：

@user689，你说的 “没用” 是什么意思。发生什么了？你的控制台错误是什么？
@Sparky 错误消息仍然是红色的，这意味着它不起作用。错误：未捕获的类型错误：无法调用未定义的方法“charAt”
@user689，你认为这是你应该忽略的吗？ "Cannot call method charAt of undefined" ~ 把你的精力和你的 OP 集中在代码中的相应行上！
@user689 看到您的代码后，我有一个问题，您的输入元素是否有 ids flength llength 或其他一些元素？
@Sparky 我不知道控制台错误，直到你让我检查它，但我仍然不知道在这种情况下该怎么做

【解决方案2】：

试试这个

$(document).ready(function () {
$('input[type=text]').keyup(function () {
    var l = $(this).val();
    var x = $(this).attr('id'); // notice it is not l.id
    x = x.charAt(0);
    x = '#' + x + 'length';
    if (l.length < 4) {
        $(x).removeClass('valid').addClass('invalid');
    } else {
        $(x).removeClass('invalid').addClass('valid');
    }
});

});

演示 http://jsfiddle.net/3yqVg/2/

【讨论】：

我不想给输入上色，我想给错误信息上色\
@user689 提供一些 html 代码，其中错误 span 或 div 是
我正在尝试制作一个 Js Fiddle Demo。
@user689，您发布的代码包含错误，但您未能展示完整的示例并解释您遇到的错误只会造成混乱。
@Manish 它不起作用 this.id 。 id 没有分配给输入元素，而是分配给 li 元素

【解决方案3】：

尝试改变 var x = l.id; width var x = $(this).id;

【讨论】：