1

私は Parsley を初めて使用し、エンド ユーザーに優れた UX を提供したいと考えています。Parsley サイトの例は、「UX 認識の完璧な例ではない」ことは認めています。エラーメッセージの表示階層の良い例があればいいのにと思います。

同じフィールドに対して複数のエラー メッセージが表示されることはありません。一度に 1 つだけにする必要があります。それで、どうすればそれを実現できますか？

制約がフィールドに適用される順序に従って階層を構築することをお勧めします。

提案や解決策はありますか？

4

2 に答える 2

0

私も同じ問題を抱えていました。

  1. parsleyjs.org/documentation.html#parsleyclassesを確認して 、「エラー コンテナーの変更」セクションのコードを使用してください。
  2. これを 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 検証とほとんど同じです。

于 2013-04-20T21:17:00.337 に答える