jQuery - validation result is different from JS Fiddle demo

Question

I am having a very weird issue where the code of my working files doesn't work when the same code on my JS Fiddle works fine.

All I am doing is checking whether either username or password field is submitted blank. For some reason, my working platform code doesn't pick up any input value.

I've gone through number of times, making sure that I am on same code environment but everything is identical. I don't know where to take it from here.

(function($){
    $('#signIn_1').click(function () {  

        var username = $('#username_1').val();
        var password = $('#password_1').val();

        if ( username === '' || password === '' ) {
            $('.fa-user').removeClass('success').addClass('fail');  
        } else {
            $('.fa-user').removeClass('fail').addClass('success');      
        }

    });
})(jQuery);

Is my if statement violating any rules that might result in inconsistency?

JS Fiddle

you would want to trim username and password before checking for equality in 'if' — Surender, Nov 15 '13 at 12:09
Thanks. I originally had `trim` and here tested without it. Both did not work for me. — Seong Lee, Nov 15 '13 at 12:11

score 2 · Accepted Answer · edited May 23 '17 at 11:50

The problem is that your <form> element is submitting, thus reloading the page. I recommend modifying the form's submit event rather than giving the button a click event, as forms are usually but not necessarily triggered by clicking the button. Also, return false is not a good way of disabling behaviour.

Example:

(function($){
    $('#form_1').submit(function (event) {
        var username = $('#username_1').val();
        var password = $('#password_1').val();
        if ( username === '' || password === '' ) {
            event.preventDefault();
            $('.fa-user').removeClass('success').addClass('fail');
        }
        else {
            $('.fa-user').removeClass('fail').addClass('success');      
        }
    });
})(jQuery);

Here's the fiddle: http://jsfiddle.net/RyanJW/VqwNw/1/

score 1 · Answer 2 · answered Nov 15 '13 at 12:10

check this
use return false to stop execution

(function($){
    $('#signIn_1').click(function () {  

        var username = $('#username_1').val();
        var password = $('#password_1').val();

        if ( $.trim(username) === '' || $.trim(password) === '' ) {
            $('.fa-user').removeClass('success').addClass('fail');  
            return false;
        } else {
            $('.fa-user').removeClass('fail').addClass('success');      
        }

    });
})(jQuery);

Fiddle

jQuery - validation result is different from JS Fiddle demo

2 Answers2