Как изменить свойства CSS в случае успеха каждого поля с помощью Parsley.js

Question

Я задавал этот вопрос много месяцев назад, и на него никогда не было ответа, но я хотел бы попробовать еще раз с более конкретными деталями.

Я использую parsley.js и в настоящее время всякий раз, когда проверяется поле формы, это поле становится зеленым, это здорово. Но то, что я пытаюсь сделать, это добавить функцию javascript (или я не знаю, есть ли встроенный способ сделать это с петрушкой), которая изменяет свойство css в случае успеха. В частности, я просто хочу изменить отображение div с ни на встроенный. В конце дня я просто пытаюсь сделать зеленую галочку рядом с каждым полем при проверке.

Любая помощь будет оценена.

Также я не знаю, помогает ли это, но здесь я скопировал это из консоли 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

Вы, вероятно, захотите parsley:field:success а также parsley:field:error События.

Когда у вас есть обработчик событий, вы можете использовать всевозможные стратегии, используя jQuery - вы можете проверить наличие классов успеха в элементах, которые вас интересуют, и, например, применить класс CSS к элементам одного уровня.