我是Parsley的新手,并希望为我的最终用户提供良好的UX。诚然,在Parsley网站上的示例“不是UX意识的完美示例”。这让我希望有一个错误消息显示层次结构的好例子。

用户永远都不会在同一字段中看到多个错误消息。一次只能一次。那么,我该如何实现呢?

我建议根据约束应用于字段的顺序来构造层次结构。

有什么建议或解决方案吗?

最佳答案

我有同样的问题。

  • checkout :parsleyjs.org/documentation.html#parsleyclasses
    并使用“更改错误容器”部分中的代码。
  • 将此添加到您的CSS:.parsley-container{display:none} input:focus+.parsley-container{display:block}

  • 我为自己做了更多事情:
    .parsley-container {
      display: none;
      position: absolute;
      margin: 10px 0 0 0;
      padding: 2px 5px;
      z-index: 2;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      -o-border-radius: 3px;
      border-radius: 3px;
      background: #ffffff;
      border: 1px solid #888888;
    }
    .parsley-container:after, .parsley-container:before {
      bottom: 100%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    .parsley-container:after {
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: #ffffff;
      border-width: 10px;
      left: 50%;
      margin-left: -10px;
    }
    .parsley-container:before {
      border-color: rgba(136, 136, 136, 0);
      border-bottom-color: #888888;
      border-width: 11px;
      left: 50%;
      margin-left: -11px;
    }
    input:focus + .parsley-container,
    input:active + .parsley-container {
      display: block;
    }
    

    与Chrome HTML5验证非常相似。

    关于error-handling - Parsley.js : Error Message Hierarchy,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15016993/

    10-12 13:41