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 [email protected]:JohnathanMarkSmith/JQueryToolTipValidation.git cd JQueryToolTipValidation mvn tomcat7:run
Затем откройте http: // localhost: 8080 / JQueryToolTipValidation.git / в вашем браузере и поиграйте. Идите, веселитесь….
Вы можете загрузить исходный код для этого в моем проекте github (https://github.com/JohnathanMarkSmith/JQueryToolTipValidation)
Если у вас есть какие-либо вопросы или комментарии, пожалуйста, напишите мне на [email protected]