jQuery toggleClass example

Toggle class name on click in jQuery

by Dedi Wibisono

HTML

<div>
  <input type="text" id="login" placeholder="login" class="lala">
  <small class="error">error</small>
</div>

<div>
<input type="password" id="pwd" placeholder="password" class="lala">
<small class="error">error</small>  
</div>

<button onclick="return dedi();">submit</button>

CSS

.error {
  display:none;
}
.dedi {
  display:block !important
}

JavaScript

function dedi(){
	var login = $("#login");
  var login_length = login.val();
  var pwd = $("#pwd");
  var pwd_length = pwd.val();
  
  if( login_length < 1) {
  	login.next(".error").addClass("dedi");
    login.focus();
    return false
  } else if (pwd_length < 1) {
  	pwd.next(".error").addClass("dedi");
    pwd.focus();
    return false
  } else {
  	$(".error").removeClass("dedi")
  	alert ('success')
  	return true
  }
}

	$(".error").each (function(){
    $(".lala").on('input', function(){  	
   		var aa = $(this);
      if (aa.val().length > 0) {
      	aa.next('.error').removeClass('dedi')
      }
  })
})