0

So by default, jQuery Validation creates a 'label' element with the error message after the offending input field with the generic messages (that Im fine with). However, I want the label to look just like the jQuery UI alert message that you see on the themeroller site.

So instead of the default:

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

I want validate to use the following "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>

I see several ways of changing error classes, message classes, or even error elements - but not the 'wrapper html' of the error message. Anyone gotten this right?

4

1 回答 1

0

您可以在 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>
于 2012-11-12T21:17:00.590 回答