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

Question

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

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

如有任何帮助，我们将不胜感激。

我也不知道这是否有帮助，但我在这里从 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 class 的解决方案 - 勾选并在 div 中输入，告诉欧芹将成功 class 放在父项，然后使用 class 选择器显示复选标记。这是一个例子：

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/

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

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

获得事件处理程序后，您可以使用各种策略 jQuery - 您可以在您关心的元素中检查是否成功 classes 并应用CSS class 到兄弟元素，例如。

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

How to change CSS properties on success of each field with Parsley.js

javascript

jquery

parsley.js