Клиентские форма проверки с JQuery
6 ноября 2008 Филипа Beel · 1 комментарий 
Этот учебник покажет вам, как проверять простую форму контакта с помощью bassistance плагина Jquery проверку. Это позволит вам проверить форму, прежде чем он был представлен. Просмотреть демо здесь.
Шаг 1 - форма
Такая же форма была по признакам Ajax Контактная форма Учебник. Итак, если вы хотите продлить оригинальной формы, это руководство должно позволить вам сделать это довольно легко.
Для начала нам нужен новый файл, назовем его contact.html, в нем мы будем создавать нашу форму, как это.
<div id="container">
<form id="contactForm" method="" action="">
<p>
<label for="name">Name </label>
<input id="name" name="name" />
</p>
<p>
<label for="email">E-Mail </label>
<input id="email" name="email" />
</p>
<p>
<label for="message">Your Message </label>
<textarea id="message" name="message" rows="4" cols="30" >
</textarea>
</p>
<p>
<input class="submit" type="submit" value="submit"/>
</p>
</form>
</div>
Теперь у нас есть простой формы с полями 2 и текстовое поле, которое мы будем проверку.
Шаг 2 - плагин
Плагин мы используем могут быть скачаны с Здесь мы также нужна копия JQuery, которые могут быть dowloaded от сюда. Теперь, когда у нас есть файлы, мы должны приложить их к нашему contact.html файл, например так.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
Пожалуйста, обратите внимание, что ее очень важно, что вы называете JQuery в первую иначе рамки не будут работать.
Шаг 3 - Кодекс
Код сам по себе очень легкий вес, Check It Out
//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
//set the rules for the field names
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 2
},
},
//set messages to appear inline
messages: {
name: "Please enter your name",
email: "Please enter a valid email address",
message: "Please enter your message"
}
});
});
Все, что мы здесь делаем зовет OnLoad функция, которая инициирует проверку формы, используя проверку. Плагина требует проверки вы проходите через несколько paramenters.
Правила - позволяет указать имена полей вы хотите действовать в соответствии, в нашем случае мы использовали имя, адрес электронной почты и сообщений. Внутри этого мы определяем, если поле является обязательным или нет, либо путем передачи истинными или ложными, мы хотим, чтобы подтвердить все поля, чтобы все они помечены как истинный. Следующий параметр Minlength, которая .. вы уже догадались, позволяет установить минимальное количество символов, который должен быть заключен.
сообщений - позволяет вам установить конкретные сообщения для определенной области, если вы решите не устанавливать messge, по умолчанию предоставляется одна который будет говорить что-то вроде "Это поле является обязательным"
Шаг 4 - Tidy It Up
Для предупреждения кажутся более заметными мы можем добавить стиля, хотя это не является обязательным. Вы можете заметить, что, когда появляется сообщение об ошибке, завернутые в своем классе называемые ошибки делает его простым для нас, чтобы добавить информацию о стиле вот так
.error {
color: red;
font: 12pt verdana;
padding-left: 10px
}Это все и есть к нему. Скачать код и попробуйте для себя здесь
Полезно, но, конечно, вам все равно придется иметь серверные проверки также.