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');
});
Was it helpful?

Solution

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

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
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top