添加自定义 CSS class 和 parsley.js

Question

使用 ParsleyJS，我有一些自定义 javascript 到 add/remove 一个 CSS class 到一个图标，基于输入是否有效。一切正常，除非用户成功输入一个输入并且 tabs/goes 到下一个输入。发生这种情况时，即使输入无效，class 也会应用于图标。

参见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/

Answer 2

也许你可以使用 focusout 和 change。 data-parsley-trigger="change focusout"

https://jsfiddle.net/cfw80607/2/

添加自定义 CSS class 和 parsley.js

Add a custom CSS class with parsley.js

html

javascript

css

jquery

parsley.js