kilogram kilogram - 12 days ago 6
jQuery Question

jQuery form validation with input color

I want to validate empty input field with jQuery, just like on this website vk.com

I like the effect when you submit the form on this website, the input is becoming red for a moment and gradually getting its initial color. You can watch this yourself

Here is video of this validation

Answer

Try something like this:

//check if input is empty    
$('.someinputs').each(function(){
          if($(this).val() == 0 || $(this).val() == '') {
            $(this).addClass('empty_field');
          }
          else {
            $(this).removeClass('empty_field');
          }
        });

//this function lights field which have class '.empty_field'
function lightEmpty(){
                $('.empty_field').each(function(){                      
                   $(this).css('border','2px solid #d8512d');
                });
                setTimeout(function(){
                $('.empty_field').each(function(){                        
                  $(this).css('border','1px solid #cdcdcd');
                });
              },1500);
}

//this triggers lightEmpty()
if (emptyInputs.length != 0)
    {
        lightEmpty();
    }

It's just changing border of inputs with specific color for time which you can write in setTimeout function. I think you can figure out where to use this code