Question

我在几个月前问过这个问题并且从未得到过回答，但我想再次尝试更具体的细节。

我正在使用parsley.js，目前每当验证表单字段时，该字段变为绿色，这很棒。但我想要做的就是添加一个javascript函数（或者我不知道是否有内置的方法来使用欧芹），这会在成功时更改css属性。具体来说，我只想将div的显示从none更改为inline。在一天结束时，我只是在验证时尝试在每个字段旁边显示绿色选中标记。

任何帮助都将不胜感激。

此外，我不知道这是否有帮助，但我在此处从Chrome控制台复制了此内容。

<input data-parsley-maxlength="22" data-parsley-maxlength-message="You've exceeded the recommended space" data-parsley-trigger="change" data-required="true" id="id_headline" maxlength="200" name="headline" type="text" data-parsley-id="3782" class="parsley-success">

Answer 1

一个非常简单的解决方案是基于CSS类的解决方案 - 在div中使用复选标记和输入，告诉欧芹将成功类放在父级上，然后使用类选择器显示复选标记。这是一个例子：

<强> HTML

<form id="demo-form" data-parsley-validate>
    <div class="input-holder">
        <input name="id-number" type="number" data-parsley-trigger="keyup" data-parsley-class-handler=":parent">
        <div class="checkmark">CHECKMARK</div>
    </div>
</form>

<强> CSS

.checkmark {
    display: none;
}
.input-holder.parsley-success .checkmark {
    display: block;
}

http://jsfiddle.net/kuJPL/25/

另一种可能的解决方案是全局或通过订阅单个表单或字段来监听正确的事件。欧芹事件：http://parsleyjs.org/doc/index.html#psly-events-overview

您可能想要parsley:field:success和parsley:field:error事件。

一旦你有了一个事件处理程序，就可以使用jQuery提供各种策略 - 你可以检查你关心的元素中的成功类，并将CSS类应用于兄弟元素，例如。

如何使用Parsley.js更改每个字段成功时的CSS属性

1 个答案: