同时验证多个输入

Question

I have three text inputs :

• First name
• Last Name
• User Name

In the form I have only these inputs are of type: text.
I want each one of them to be at least 4 characters long so I decided to validate them together.
I want to use Jquery to display an error message that is red when the length is less than 4 and green when it is greater. I put three error messages respectively with the following Ids:

• flength
• llength
• ulength

(the first letter corresponds to the input , example first name : flength and so on)
so here is my code to do this:

$('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');
    }
});

Why wouldn't this script work? what should I modify?
Edit
demo

Answer 1

After seeing your comments

changing var x = $(this).attr("id"); wont fix the problem too

since $(this).attr("id") gives your current element id and your current element is your input tag element and you did not set the id attribute, Instead you have set it to div tags as you have mentioned in your comments, since you are trying to retrieve id attribute which you have not set and your getting an error.

One solution I could give is this way

<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');
    }
});

Check this http://jsfiddle.net/Q2y8m/4/

Answer 2

Try this

$(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');
    }
});

});

Demo http://jsfiddle.net/3yqVg/2/

Answer 3

Try to change var x = l.id; width var x = $(this).id;