0

したがって、デフォルトでは、jQuery Validationは、問題のある入力フィールドの後にエラー メッセージを含む「ラベル」要素を作成し、一般的なメッセージを表示します (Im は問題ありません)。ただし、themeroller サイトで表示される jQuery UI 警告メッセージと同じようにラベルを表示したいと考えています。

したがって、デフォルトの代わりに：

<label for="fieldname" generated="true">JQUERY VALIDATE ERROR APPEARS HERE</label>

次の「ラッパーhtml」を使用するように検証したい：

<div class="ui-widget">
  <div class="ui-state-error ui-corner-all">
    <p>
      <span class="ui-icon ui-icon-alert"></span>
      <strong>Alert:</strong> JQUERY VALIDATE ERROR MESSAGE WOULD APPEAR HERE
    </p>
  </div>
</div>

エラー クラス、メッセージ クラス、さらにはエラー要素を変更する方法はいくつかありますが、エラー メッセージの「ラッパー html」は変更できません。誰もがこれを正しく理解しましたか？

4

1 に答える 1

0

これは errorPlacement メソッドで行うことができます。nbフィールドが正しく検証された後、メッセージを非表示にするコードを書く必要がありました

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('input').bind('keyup', function () {
                if ($(this).valid()) {
                    if ($(this).next().hasClass('ui-widget')) {
                        $(this).next().remove();
                    }
                }
            });

            $('form').validate({
                errorPlacement: function (error, element) {
                    if (!element.next().hasClass('ui-widget')) {
                        $('<div class="ui-widget"><div class="ui-state-error ui-corner-all"><p><span class="ui-icon ui-icon-alert"></span><strong>Alert:</strong> ' + error[0].innerHTML + ' </p></div></div>').insertAfter(element);
                    }
                }
            });

        });
    </script>
</head>
<body>
    <form>
    <input name="one" class="required number" /><br />
    <input type="submit" />
    </form>
</body>
</html>
于 2012-11-12T21:17:00.590 に答える