Question

I have multiple inputs of text within a form and want to validate each input like this:

  $(document).on('keyup', 'input [type="text"]', function (){
    var html = '<span class="error">Se necesita una <b>descripcion mayor a 3 letras!</b>!</span>';
    var val = $(this);
    alert(val.val());   
    //if it's NOT valid  
    if(t.val().length < 4){  
        $(html).insertAfter(val);

    }  
    //if it's valid  
    else{  
        val.find('.error').remove();

    }
});

I’m doing a keyup event on each of the inputs and using this to reference the input on which the user is typing into, but no validation occurs and no value is alerted so I guess that the function is not triggering is the input selector right? Is that the correct way to use “this”?

Answer 1

input [type="text"] is not the right selector, it should be input[type="text"] or input:text

The space is important. It’s looking for child elements of input elements that have [type=text] attributes.

---

You may be better off rewiring your event like so:

$("input:text").on("keyup", function(e) {
    var $input = $(this);

    if($input.val().length < 4) {  
        var $error = $("<span>", {
            html = "Se necesita una <b>descripcion mayor a 3 letras!",
            "class" = "error"
        });
        $error.insertAfter($input);
    }
    else {  
        $input.siblings(".error").remove();
    }
});