Jquery check of inputs before submit with blur and focusing

I have one page with a few forms and I want to add a开发者_开发百科 JQUERY or AJAX check for each input from the form. All the inputs are required . I did manage to make the check but I need to add check foreach input which I really don't like. Can you help me to make this input check little more global. I have managed to make that code :

$(document).ready(function()
{
    $(document.login.user).blur(function()
    {
        if (document.login.user.value == "")
        {
            document.login.user.style.background = "red";
        }
        else document.login.user.style.background = "white";
    });
    $(document.login.pass).blur(function()
    {
        if (document.login.pass.value == "")
        {
            document.login.pass.style.background = "red";
        }
        else document.login.user.style.background = "white";
    });
});

Can you make it to work global.. to check each input individually and make that effect I have added.

you can create a simple plugin like this:

(function($){
    $.fn.validateEmpty = function(settings) {
        return $(this).each(function(){
            $(this).css({background: $(this).val() == '' ? settings.empty : settings.nonEmpty});
        });
    };
})(jQuery);

and then use it:

$(document).ready(function(){
    $('#myForm input').blur(function(){
        $(this).validateEmpty({empty: 'red', nonEmpty: 'green'});
    });
});

jsFiddle Demo

You can select all the input fields by giving a common class to each of them and use class selector or simple select them by tag name under the form. Try this

$(document).ready(function(){
    $("form").find("input, textarea").blur(function(){
        var $this = $(this);
        if($this.val() == ""){
            $this.css("backgroundColor", "red");
        }
        else{
            $this.css("backgroundColor", "white");
        }
    });
});

I've had good luck with the Jquery Validate() plugin: http://docs.jquery.com/Plugins/validation. Then, you just label each field that you want validated with a "required" class. Note: works with jquery 1.5.2 and not 1.6.2 (that'll save you some pain)

$('form.formclass input').blur(function() {
  if($(this).val() == '') { 
    $(this).css('background-color', 'red');
  } else {
    $(this).css('background-color', 'white');
  }
});

You would need to change the selector though to represent your form fields

EDIT

Demo: http://jsfiddle.net/xNsnk/

You should try a plugin to make your validation needs easier. This one is usually a good solution: http://docs.jquery.com/Plugins/validation

You could check using a selector on all input elements with the following:

$("input").blur( ....etc... )

Or, you could assign a class to any element you want tested, and check any element with that class...

(".className").blur( ....etc.... )

use the each() function of jquery to iterate through all available input boxes.

I know its again a for loop kind, but to me its more generic with jquery.