Как использовать JQuery BeautyTips (всплывающие подсказки) и плагины проверки для проверки поля

JQuery ToolTips и пример валидации

Это всего лишь один пример страницы JSP, который демонстрирует некоторые подсказки JQuery ToolTips и Validation. Да, мне действительно не нужно было использовать JSP и tomcat7, но опять же, это всего лишь пример из одной страницы, так почему бы и нет… 🙂

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

в моем примере у меня есть некоторый HTML-код, который выглядит следующим образом:

    <div>
        <form id="myForm">
            <p>
                Gender:
                <label for="male">Male</label>
                <input type="radio" name="gender" id="male" class="target" title="Please enter your gender.">
                <label for="female">Female</label>
                <input type="radio" name="gender" id="female" class="target" title="Please enter your gender.">

            </p>
            <p>
                <label for="firstName">First Name:</label>
                <input id="firstName" name="firstName" class="target" title="Please enter your first name." ></input>
            </p>
            <p>
                <label for="lastName">Last Name:</label>
                <input id="lastName" name="lastName" class="target" title="Please enter your last name." ></input>
            </p>
            <p>
                <label for="age">Age:</label>
                <input id="age" name="age" class="target" title="Please enter your age." ></input>
            </p>
            <p>
                <input type="submit" value="Submit" />
            </p>
        </form>
    </div>

Я хотел добавить некоторую проверку, чтобы проверить, что данные были введены в поля и почему бы не использовать для этого JQuery.

Затем я сделал следующий код таблицы стилей:

        <style type="text/css">
                #errorContainer {
                    display: none;
                    overflow: auto;
                    background-color: #FFDDDD;
                    border: 1px solid #FF2323;
                    padding-top: 1;
                }

                #errorContainer label {
                    float: none;
                    width: auto;
                }

                input.error {
                    border: 1px solid #FF2323;
                }

         </style>

Это собирается настроить, как будут выглядеть ошибки. Затем мне пришлось добавить место на моей странице для ошибок, поэтому я добавил следующий div:

    <div id="errorContainer">
        <p> Please correct the following errors and try again:</p>
        <ul />
    </div>

Код выше, где JQuery будет отображать ошибки.

Теперь пришло время для тяжелой работы 🙂

Вам нужно добавить JQuery, BeautyTips (ToolTips) и библиотеки Validate в ваш код, добавив следующие строки:

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script src="js/jquery.bt.min.js" type="text/javascript" charset="utf-8"></script>

Теперь давайте добавим код JQuery / JavaScript, который будет проверять поля на странице. Как вы можете видеть из приведенного ниже кода, я даю JQuery правила (имена полей, диапазоны) и сообщения об ошибках для отображения.

    <script type="text/javascript">
        $(function(){

            $('#myForm').validate({
                rules: {
                    firstName: "required",
                    lastName: "required",
                    age: {
                        required: true,
                        range: [18,70]
                    }
                },
                messages: {
                    firstName: "Please enter your first name.",
                    lastName: "Please enter your last name.",
                    age: {
                        required: "Please enter your age.",
                        range: "Your age must be between 21 and 55."
                    }
                },
                errorContainer: $('#errorContainer'),
                errorLabelContainer: $('#errorContainer ul'),
                wrapper: 'li'
            });

        });
    </script>

Теперь проверьте ваш код .. Он прекрасно работает, но где всплывающие подсказки?

Добавление подсказок по красоте (подсказки)

Перепишите код javascipt с кодом ниже:

<script type="text/javascript">
    $(function(){

        $('#firstName').bt();
        $('#lastName').bt();
        $('#age').bt();
        $('#male').bt();
        $('#female').bt();

        $('#myForm').validate({
            rules: {
                firstName: "required",
                lastName: "required",
                gender: "required",
                age: {
                    required: true,
                    range: [18,70]
                }
            },
            messages: {
                firstName: "Please enter your first name.",
                lastName: "Please enter your last name.",
                gender: "Please enter your gender.",
                age: {
                    required: "Please enter your age.",
                    range: "Your age must be between 21 and 55."
                }
            },
            errorContainer: $('#errorContainer'),
            errorLabelContainer: $('#errorContainer ul'),
            wrapper: 'li'
        });

    });
</script>

Вы можете увидеть все, что мы добавили:

$('#firstName').bt();
$('#lastName').bt();
$('#age').bt();
$('#male').bt();
$('#female').bt();

Приведенный выше код говорит подсказкам Beautytips добавить подсказки

Вы можете увидеть, как легко использовать JQuery, BeautyTips (ToolTips) и Validation…

Как получить проект и запустить его

Оформить заказ из GitHub.

git clone git@github.com:JohnathanMarkSmith/JQueryToolTipValidation.git
cd JQueryToolTipValidation
mvn tomcat7:run

Затем откройте http: // localhost: 8080 / JQueryToolTipValidation.git / в вашем браузере и поиграйте. Идите, веселитесь….

Вы можете загрузить исходный код для этого в моем проекте github (https://github.com/JohnathanMarkSmith/JQueryToolTipValidation)

Если у вас есть какие-либо вопросы или комментарии, пожалуйста, напишите мне на john@johnathanmarksmith.com