Question

我已经将parsley.js与我网站上的表单集成在一起，但我正在尝试更进一步，并在成功时显示一个图像（绿色复选标记）以显示在每个字段旁边。

这似乎是一个非常简单的问题，但不幸的是我无法通过遵循parsley.js文档来弄清楚如何做到这一点。

我猜我只是创建一个div，图像位于我想要的位置，然后执行'display：none'，然后将显示更改为块或成功的东西？即便是我刚才描述的我也不知道该怎么做。

任何帮助都将不胜感激。

Answer 1

将此代码添加到链接到网页的CSS文件

＆＃13;

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
	  color: #468847;
	  border: 1px solid rgba(80, 210, 80, 1);
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
	color: white;
	background-color: rgba(255, 30, 30, 0.235);
	border: 1px solid #F56969;
	outline:none;
}

.parsley-errors-list {
  margin: 4px 0 3px;
  padding: 0;
  list-style-type:none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
	font-family:Arial;
  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
  color:black;
}

.parsley-errors-list.filled {
  opacity: 1;
}

＆＃13;

在＆＃34; input.parsley.select＆＃34;属性，添加：

＆＃13;

background: url("link/to/image.jpg") 100px no-repeat;

＆＃13;

＆＃34; 100px＆＃34;可能会有所不同，具体取决于输入的大小。

如果要添加绿色，则可以在设置图像的行之后添加此颜色

＆＃13;

background-color: rgba(80, 210, 80, 0.35);

＆＃13;

要为不正确的元素执行此操作，您可以执行相同的操作，但输入＆＃34; input.parsley-error＆＃34;。

使用此CSS，您还可以更改其他一些内容，例如错误的字体，列表类型和文本颜色。我建议你玩这个，直到你得到你喜欢的东西。

希望我帮忙！

如何在parsley.js中成功显示图像？

1 个答案: