Question

因此，默认情况下，jQuery Validation在带有通用消息的违规输入字段之后创建一个带有错误消息的'label'元素（我很好）。但是，我希望标签看起来就像您在themeroller网站上看到的jQuery UI警报消息。

而不是默认值：

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

我想验证使用以下“wrapper 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”。有谁得到了这个权利？

Answer 1

你可以在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>

自定义HTML for jQuery Validatation插件错误标签

1 个答案: