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

Question

I asked this question many months ago and it was never answered, but I would like to try again with more specific details.

I'm using parsley.js and currently whenever a form field is validated, that field turns green, that's great. But what I'm trying to do is add a javascript function (or I don't know if there is a built in way to do it with parsley) that changes a css property on success. Specifically I just want to change a div's display from none to inline. At the end of the day I'm just trying to have a green checkmark appear next to each field when validated.

Any help would be appreciated.

Also I don't know if this helps but here I copied this from Chrome Console.

<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

An extremely easy solution is a CSS class based one - have your checkmark and the input in a div, tell parsley to place the success class on the parent, and then display the checkmark with a class selector. Here's an example:

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/

Another possible solution is to listen for the right events, either globally or by subscribing on the individual forms or fields. Parsley events: http://parsleyjs.org/doc/index.html#psly-events-overview

You'll probably want the parsley:field:success and parsley:field:error events.

Once you've got an event handler, there are all sorts of strategies available to you using jQuery - you can check for success classes in the elements you care about and apply a CSS class to sibling elements, for example.