javascript - jQuery - 如果提交的表单为空白，则添加自定义 css 类

Question

当提交的登录表单包含空白值时，我正在尝试将自定义 css 类添加到图标类（Font Awesome）。

我的目的是将图标颜色更改为红色以指示登录尝试失败。

以下是我的 jQuery 代码，但它似乎没有将我的自定义 css 类添加fail 到图标类fa-user。

$('#form_1').submit(function () {

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

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

});

这是我的JS 小提琴

Answer 1

您没有在小提琴中包含 jQuery 库

演示：小提琴

还使用禁用 html5 验证

<form id="form_1" novalidate>

Answer 2

$('#signIn_1').on ("click", function () {    
    var username = $.trim($('#username_1').val());
    var password = $.trim($('#password_1').val());

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

这样，您的表单在提交之前会被检查（即在浏览器本身检查之前）。