Question

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.

Answer 1

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