Jquery Simple Operation Problem

Hey! first of all im still new to JavaScript and its libraries, so any help is really appreciated. Anyways, I'm adding a client side validation form for my php mail script so that users dont need to wait to submit the form then refill what they did wrong. Instead, they will be corrected as soon as they fill each one of the forms. My problem is that when input[name=name] has a length of 5 or more it still triggers the css() function. Why is this not working. when i = 8 meaning that 8<4 = false but the function still changes the css. Please help.

$(function(){ //Ready Document Function
    var name = $('[name="name"]');
    var email = $('[name="email"]');
    var subject = $('[name="subject"]');
    var message = $('[name="message"]');
    var sec = $('[name="sec"]');
   
    var div = $("#jquery"); //test code
    //var value = name.attr('value').length; //test code
    div.text('test'); //test code

    name.blur(function() {
        var i = $(this).val().length; 
        if(i<4){ //blank or not letters or less than 4
            name.css('background','red');
            div.text(i +'is more than 4');
        }
       
    });

    email.on('blur', function() {
    });
   
    message.on('blur', function() {
    });
   
    subject.on('blur', function() {
    });
    sec.on('blur', function() {
    });   
});

Code (markup):

 

have you done any debugging?

Use chrome go into the developer console then change the code to this

 name.blur(function() {
        var i = $(this).val().length;
        console.log($(this).val());
        if(i<4){ //blank or not letters or less than 4
            name.css('background','red');
            div.text(i +'is more than 4');
        }
      
    });

HTML:

Check if the text that you entered into the textbox is coming up in the console. If not then you got the selector wrong.