css - 如何配置 simple_form 以显示验证状态

Question

我有简单的 CSS:

form.submitted span::after { content: ' ✓'; } 

- 提交表单后字段有效时应显示✓

当字段无效时，下面的样式会覆盖上面的样式:

form.submitted span.error::after { content: ' ⨉'; }

问题是当表单字段有效时，简单表单不会生成 .span 或任何其他选择器。

这种情况下如何实现这个功能？

Answer 1

好的，我找到了一些解决方案:

我动态添加缺少的跨度选择器:

$(document).ready ->
  $("form.submitted div.input").each ->
    if $(this).find("span.error").length is 0
      row_str = "<span class=\"valid\"></span>"
      $(this).append row_str

现在看起来像: