Input blur not working

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');
});

Answer 1

Typo

$('#legal_name')
   ^ missing id-selector

# id-selector

---

or better use

$('#legal_name').focus(function () {
    $(this).removeClass('whiteBorder').addClass('required');
}).blur(function () {
    $(this).removeClass('required').addClass('success');
});

this-keyword

Answer 2

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');
});

Answer 3

You have missed to add # in $('legal_name')

Try add $('#legal_name')

Answer 4

$('#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
});