jQuery - результат проверки отличается от JS Fiddle demo

Question

У меня очень странная проблема, когда код моих рабочих файлов не работает, когда тот же код на моем JS Fiddle работает нормально.

Все, что я делаю, это проверка того, будет ли поле имени пользователя или пароля пустым. По какой-то причине мой код рабочей платформы не получает никакого входного значения.

Прошло много раз, убедившись, что я нахожусь в той же среде кода , но все одинаково. Я не знаю, где взять это отсюда.

(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); 

Является ли заявление my if нарушением каких-либо правил, которые могут привести к несогласованности?

JS Fiddle

Answer 1

Проблема заключается в том, что ваш <form> элемент представления, таким образом перезагрузки страницы. Я рекомендую изменить событие формы submit, а не давать кнопку click, так как формы обычно , но необязательно, вызванные нажатием кнопки. Также return false is not a good way of disabling behaviour.

Пример:

(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); 

Вот скрипка: http://jsfiddle.net/RyanJW/VqwNw/1/

Answer 2

проверить это
использование return false, чтобы остановить выполнение

(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