javascript - jQuery - 验证结果与 JS Fiddle 演示不同

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

我的 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);

这是 fiddle :http://jsfiddle.net/RyanJW/VqwNw/1/