javascript - 使用 parsley.js 添加自定义 CSS 类

Question

使用 ParsleyJS，我有一些自定义 javascript，可以根据输入是否有效向图标添加/删除 CSS 类。一切正常，除非用户成功输入一个输入并跳转到下一个输入。发生这种情况时，即使输入无效，该类也会应用于图标。

参见 fiddle :https://jsfiddle.net/cfw80607/1/

JavaScript:

$('form').parsley().subscribe('parsley:field:validate', function (fieldInstance) {
    if ($('#name').parsley().isValid()) 
        $('.fa-user').addClass('cta-success').removeClass('cta-error');
    else
        $('.fa-user').addClass('cta-error').removeClass('cta-success');
    if ($('#email').parsley().isValid())
        $('.form-group .fa-envelope').addClass('cta-success').removeClass('cta-error');
    else
        $('.form-group .fa-envelope').addClass('cta-error').removeClass('cta-success');
});

Answer 1

我想你想在每个领域都使用监听器

$('form').parsley();

$.listen('parsley:field:error', function(ParsleyField) {
    ParsleyField.$element.prev('i.fa').removeClass('cta-success').addClass('cta-error');
});
$.listen('parsley:field:success', function(ParsleyField) {
    ParsleyField.$element.prev('i.fa').removeClass('cta-error').addClass("cta-success");    
});

此处示例 https://jsfiddle.net/acidrat/wqpr4gcq/