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 Fiddle

Answer 1

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

演示：fiddle

还使用

禁用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;
    }
});

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

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

2 个答案: