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

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

参见小提琴：

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

---

我认为您希望在每个字段上使用侦听器

$('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");    
});

---

这里的示例

也许您可以使用focusout以及更改。

data parsley trigger=“change focusout”

---

哦，我认为@Timur有一个更干净的答案。虽然js fiddle看起来没有使用

parsley:form:validated

，但这可能是正确的答案，不仅仅是增加了更多触发器：）我忘了更新fiddle，现在应该是正确的：）我添加了parsley:form:validated，它似乎仍然不太正常。@Majoros也许你可以解释一下你到底想达到什么目的？我正在尝试向输入中的图标添加一个css类，以便它们根据字段是否有效而改变颜色（如果有效，则为绿色；如果无效，则为红色）。你的小提琴工作得很好-图标只是不改变颜色。使用我创建的javascript代码，我可以让图标改变颜色，但我有一个问题——输入一个输入后，另一个输入上的下一个图标会在生效之前改变颜色。为了澄清，请参见屏幕截图：在输入用欧芹验证之前，电子邮件图标是红色的（类已应用）。我试图避免这种情况，所以你是说我的JSFIDLE可以工作，但你的代码不能？如果是这种情况，您应该提供更多的代码。这是我的小提琴：