jQuery addClass example

Change class name on click in jQuery

HTML

<input type="tel" name="foo" />
<input type="tel" name="bar" />
<input type="tel" name="baz" />

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

input {
  margin: 0 0 1em;
}

.valid, .error {
  margin: 0 0 1em;
  transition: all 0.2s;
  max-height: 30px;
}

.valid {
  color: green;
}
  
.error {
  color: red;
}

.hidden {
  height: 0;
  opacity: 0;
  margin: 0;
}

JavaScript

var $telephoneInputs = $('input[type="tel"]');

$telephoneInputs.each(function (i, item) {
console.log(item, i);
	var $item = $(item);
  var name = $item.attr('name');
  
  $item.attr('name', name + '_input');
  
  var hiddenInputName = name;
  
  var $validMessage = $('<div />').addClass('valid hidden').text('Looks good!');
  var $errorMessage = $('<div />').addClass('error hidden').text('WHOA, something is wrong here.');
  
  $item.after($validMessage);
  $item.after($errorMessage);
  
  $item.on('blur', function (event) {
  	var $target = $(event.currentTarget);
    
    if ($target.val() === '') {
    	$validMessage.addClass('hidden');
      $errorMessage.removeClass('hidden');
    } else {
    	$validMessage.removeClass('hidden');
      $errorMessage.addClass('hidden');
    }
  })
});