我几个月前曾问过这个问题,但一直没有得到回答,但是我想用更具体的细节再试一次。
我正在使用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">
一个非常简单的解决方案是基于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 : //parsleyjs.org/doc/index.html#psly-events-overview
您可能需要parsley:field:success
和parsley:field:error
事件。
一旦有了事件处理程序,就可以使用jQuery使用各种策略-例如,您可以在自己关心的元素中检查成功类,并将CSS类应用于同级元素。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句