Typo
$('#legal_name')
^ missing id-selector
or better use
$('#legal_name').focus(function () {
$(this).removeClass('whiteBorder').addClass('required');
}).blur(function () {
$(this).removeClass('required').addClass('success');
});
Question
I am trying to add a .success class to an input field whenever I click out of the input field. However, when I click off of the input the .required class is still showing even though I have removed the class. What am I doing wrong?
$('#legal_name').focus(function () {
$('legal_name').removeClass('whiteBorder');
$('#legal_name').addClass('required');
});
$('#legal_name').blur(function () {
$('legal_name').removeClass('required');
$('legal_name').addClass('success');
});
Solution
Typo
$('#legal_name')
^ missing id-selector
$('#legal_name').focus(function () {
$(this).removeClass('whiteBorder').addClass('required');
}).blur(function () {
$(this).removeClass('required').addClass('success');
});
OTHER TIPS
You are missing # signs.
$('#legal_name').focus(function() {
$('#legal_name').removeClass('whiteBorder');
$('#legal_name').addClass('required');
});
$('#legal_name').blur(function() {
$('#legal_name').removeClass('required');
$('#legal_name').addClass('success');
});
You have missed to add #
in $('legal_name')
Try add $('#legal_name')
$('#legal_name').focus(function() {
$('legal_name').removeClass('whiteBorder');
$('#legal_name').addClass('required');
});
$('#legal_name').blur(function() {
$('#legal_name').removeClass('required');
// ^ your id identifier '#' is missing
$('#legal_name').addClass('success');
// ^ same here
});