CODEWITHSUNDEEP
javascriptjquery
John Ayers
John Ayers

Reputation: 519

jQuery add and remove class checking

This function works. No issues with it working.

if ($(".register-frame").length) {
    var emailCheck = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    $('#email-field').change(function () {
        if (!$('#email-field').val().match(emailCheck)) {
            if ($("#email-field").hasClass("field-success")) {
                $("#email-field").removeClass('field-success');
            }
            if (!$("#email-field").hasClass("field-error")) {
                $("#email-field").addClass('field-error');
            }
        } else {
            if ($("#email-field").hasClass("field-error")) {
                $("#email-field").removeClass('field-error');
            }
            if (!$("#email-field").hasClass("field-success")) {
                $("#email-field").addClass('field-success');
            }
        }
    });
}
.login-frame .field-error { border-color: #A94442; }
.login-frame .field-success { border-color: #3C763D; }

Basically this function checks when an email field changes if its a valid email or not. If its not a valid email it removes the valid class if it exists and then adds the invalid class if it doesn't exist.

So my question is, this function seems over done to me. To many checks. Is there a more efficient way of doing the same thing?

Upvotes: 0

Views: 618

Answers (6)

chetank
chetank

Reputation: 402

if ($(".register-frame").length) {
    var emailCheck = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    $('#email-field').change(function () {
        if (!$('#email-field').val().match(emailCheck)) {
            //since it is failure dont check 
                $("#email-field").removeClass('field-success'); //wont give error if not present
                $("#email-field").addClass('field-error');
            
        } else {
                $("#email-field").removeClass('field-error');
                $("#email-field").addClass('field-success');
        }
    });
}
.login-frame .field-error { border-color: #A94442; }
.login-frame .field-success { border-color: #3C763D; }
or just simply you can do.

 $("#email-field").attr('class','new class') //new class can be either success or error

Upvotes: 0

zgood
zgood

Reputation: 12571

$('#email-field').change(function () {
    var cl = ($(this).val().match(emailCheck)) ? 'field-success' : 'field-error';
    $(this).removeClass('field-success field-error').addClass(cl)
});

Upvotes: 0

Peter Olson
Peter Olson

Reputation: 142921

You can simply use addClass and removeClass without checking if the class already exists, since addClass will do nothing if the class is already there, and removeClass will do nothing if the class is not there.

Also, you can use method chaining to make the code shorter.

You can also assign $('#email-field') to a variable so jQuery doesn't have to search for the same element repeatedly.

var $emailField = $('#email-field');
if (!$emailField.val().match(emailCheck)) {
  $emailField.removeClass('field-success').addClass('field-error');
} else {
  $emailField.removeClass('field-error').addClass('field-success');
}

Upvotes: 2

DHoover
DHoover

Reputation: 339

You don't need the if statements using hasClass. JQuery will handle that logic for you.

Upvotes: 0

taesu
taesu

Reputation: 4570

I'd simplify it with functions. In abstract, it would be something like:

$('#email-field').blur(function () {
    var is_valid = is_valid($(this).val());
    if (is_valid){
        $("#email-field").addClass('field-success').removeClass('field-error');
    }else{
        $("#email-field").removeClass('field-success').addClass('field-error');
    }
});

function is_valid(email){
   //blah
}

Upvotes: 3

ilan berci
ilan berci

Reputation: 3881

https://api.jquery.com/toggleClass/

Refer to the toggleClass documentation

Upvotes: 0

Related Questions