How to style jquery validation (http://jqueryvalidation.org/)?

Question

I'm looking for some sort of reference but I can't find it. All I can find are bits of styling as asked in stackoverflow or mini-examples. Nothing really comprehensive.

Also there are other jquery validation plugins and some of the discussion (mostly here in stackoverflow) I've seen doesn't really talk about which plugin is being used.

I have this code (see below) without using any CSS and and it produces this sort of styling by default.

screenshot

I looked at the site linked above and can't find any article on how to style the error messages.

Thanks very much

my code

<html>
        <head>
                <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
                <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"></script>
                <script type="text/javascript">
                        $.validator.setDefaults({
                                submitHandler: function() { alert("submitted!"); }
                        });

                        $().ready(function() {
                                // validate the comment form when it is submitted
                                $("#commentForm").validate();
                        });
                </script>
        </head>
        <body>
                <form id="commentForm">
                        <input id="email" required="" type="text" />
                        <button type="submit">Submit</button>
                </form>

        </body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:27

There is no message styling with the jQuery Validation plugin.

Quote OP:

"I have this code (see below) without using any CSS and and it produces this sort of styling by default."

No, it's not. Your picture is simply showing you the default HTML5 validation that's already built into your browser. It's triggered by HTML5 validation attributes such as required="required". These same attributes can also be used by the jQuery Validate plugin.

Your jQuery Validate plugin is not doing anything here because of some mistake not shown in your OP.

However, you forgot the name attribute on the input element. The name attribute is mandatory for this plugin to properly operate.

Try this...

<form id="commentForm">
    <input id="email" name="email" required="required" type="text" />
    <button type="submit">Submit</button>
</form>

When the jQuery Validate plugin is properly implemented, it will automatically disable the browser's default HTML5 validation.

DEMO: http://jsfiddle.net/2cKvU/

There are an infinite number of ways to style the messages with this plugin, so you really need to post a more specific coding question.

The following is an example where a popular tooltip plugin is used to style the jQuery Validate messages.

How to display messages from jQuery Validate plugin inside of Tooltipster tooltips?

As far as a "more specific reference", the documentation for the plugin explains in detail each callback function you may need to modify in order to manipulate the error messages. However, most styling would be achieved externally through HTML and CSS, not this plugin.

http://jqueryvalidation.org/validate

How to style jquery validation (http://jqueryvalidation.org/)?

1 Answers1

Linked