html form validation on focusout code example

Example: form validation focusin focusout

var name = $('#name').val();
var validName = false;
$('#name').focusin(function(event){
    event.preventDefault();
    if (!validName) {
      $(this).val('');
      $(this).css({ 'border-color': '#fff',
                    'color': 'black'});
    }else if (validName && $(this).val().length >= 4) {
      validName = true;
      name = $('#name').val();
      $(this).val(name);
      $(this).css({ 'border-color': '#fff',
                    'color': '#000'});
    }
  });

  $('#name').focusout(function(){
    if ($(this).val().length <= 3) {
      $(this).val('Minimum 4 characters!');
      $(this).css({ 'border-color': '#cc0000',
                    'color': '#cc0000'});
      validName = false;
    }else if ($(this).val().length >= 4){
      validName = true;
      name = $('#name').val();
      $(this).val(name);
    }
  });

Tags:

Misc Example