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

史蒂芬

我几个月前曾问过这个问题,但一直没有得到回答,但是我想用更具体的细节再试一次。

我正在使用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://jsfiddle.net/kuJPL/25/

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

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

一旦有了事件处理程序,就可以使用jQuery使用各种策略-例如,您可以在自己关心的元素中检查成功类,并将CSS类应用于同级元素。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Parsley.js 2.0如何使用提供的css文件

通过使用parsley.js每个字段提供多个自定义错误消息支持

如何使用parsley.js验证div中的所有表单字段?

使用parsley.js,如何验证页面加载后添加的字段?

如何覆盖Parsley.js默认配置以在整个项目中使用

Parsley Validation中如何访问元素属性

如何使用 Parsley Validate 使用 jQuery Currency formater 验证输入字段?(也许正则表达式?)

Parsley JS 2.x-如何验证隐藏字段?

使用Parsley.js时出现字段错误重复

如何更改默认 parsley.js UI/UX 行为?

使用parsley.js添加自定义CSS类

如何获取parsley.js reset()方法以重置表单

Parsley.js-如何向所需的验证器添加值

使用Parsley.js验证选择的多项选择

仅使用parsley.js在提交时验证表单

如何动态添加和删除要由Parsley.js验证的表单字段?

已由 CSS 设置的元素属性如何使用 JS 更改?

如何通过JS更改CSS属性并使用过渡?

如何使用 js 更改位于画布中的对象的 css 属性?

如何使用JavaScript在输入字段中更改特定选择文本的CSS属性

如何使用小部件属性而不是 css 更改 django 表单中下拉字段的宽度

如何在HTML中使用多个ng-app更改多个输入字段的CSS属性?

如何在Django中以酥脆形式使用Django parsley?

如何使用Parsley或HTML5验证小数位?

使用Parsley.addAsyncValidator时如何本地化消息?

如何通过Parsley.js动态添加和删除maxlength验证?

如何避免parsley.js将表单元素从水平移动到垂直?

使用Parsley.js自定义验证器检查字符串

无法使用 Parsley.js 验证引导程序 4 自定义收音机