Как стилизовать проверку jquery (http://jqueryvalidation.org/)?

Question

Как стилизовать проверку jquery (http://jqueryvalidation.org/)?

0

Я ищу какую-то ссылку, но я не могу ее найти. Все, что я могу найти, это биты стиля, заданные в stackoverflow или мини-примерах. Ничего действительно всеобъемлющего.

Также есть другие плагины проверки jquery и некоторые из обсуждений (в основном здесь, в stackoverflow), которые я видел, на самом деле не говорят о том, какой плагин используется.

У меня есть этот код (см. Ниже) без использования какого-либо CSS и он по умолчанию создает такой стиль.

Я просмотрел сайт, связанный выше, и не могу найти статью о том, как стилизовать сообщения об ошибках.

Огромное спасибо

мой код

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

mrjayviper 15 апр. 2014, в 10:02

Источник

Теги:

jquery

jquery-validate

1 ответ

Ещё вопросы

Sparky · Answer 1 · 2014-04-15T12-52-00.000Z

Плагин jQuery Validation не содержит сообщений.

Ответить OP:

"У меня есть этот код (см. Ниже) без использования CSS, и он по умолчанию создает такой стиль".

Нет, нет. Ваша фотография просто показывает вам стандартную проверку HTML5, которая уже встроена в ваш браузер. Это вызвано атрибутами проверки HTML5, такими как required="required". Эти же атрибуты могут также использоваться плагином jQuery Validate.

Ваш плагин jQuery Validate ничего не делает из-за ошибки, не показанной в вашем OP.

Однако вы забыли атрибут name на элементе input. Атрибут name является обязательным для правильной работы этого плагина.

Попробуй это...

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

Когда плагин jQuery Validate правильно реализован, он автоматически отключит проверку HTML5 по умолчанию для браузера.

ДЕМО: http://jsfiddle.net/2cKvU/

Существует бесконечное количество способов стилизации сообщений с помощью этого плагина, поэтому вам действительно нужно опубликовать более конкретный вопрос о кодировании.

Ниже приведен пример, когда популярный плагин подсказки используется для стилизации сообщений jQuery Validate.

Как отображать сообщения из jQuery Подтвердить плагин внутри всплывающих подсказок Tooltipster?

Что касается "более конкретной ссылки", в документации для плагина подробно описывается каждая функция обратного вызова, которую вам может потребоваться изменить, чтобы манипулировать сообщениями об ошибках. Тем не менее, большинство стилей будет достигнуто извне через HTML и CSS, а не этот плагин.

http://jqueryvalidation.org/validate