jQuery Validation 插件错误标签的自定义 HTML答案

【问题标题】：Custom HTML for jQuery Validatation plugin error labeljQuery Validation 插件错误标签的自定义 HTML
【发布时间】：2012-10-21 09:17:41
【问题描述】：

所以默认情况下，jQuery Validation 在带有通用消息的违规输入字段之后创建一个带有错误消息的“标签”元素（我很好）。但是，我希望标签看起来像您在 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”。有人说对了吗？

【问题讨论】：

标签： jquery jquery-ui jquery-validate

【解决方案1】：

您可以在 errorPlacement 方法中执行此操作。注意，在字段正确验证后，我必须编写一些代码来隐藏消息

<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>

【讨论】：