Пример рабочего скрипта валидации формы. [jQuery, validation and form]

Сегодня разберем пример проверки валидности заполненной формы.

Для начала нам необходимо создать определится с полями формы. В данном примере, мы будем использовать следующие:

  1. Имя
  2. Пол
  3. Адрес
  4. Email
  5. Логин
  6. Пароль

У нас получается стандартная форма для регистрации пользователя:

<html>
<head>
</head>
<!-- The form that will be parsed by jQuery before submit -->
<form action="./" method="post" id="register-form" novalidate="novalidate">
<div class="label">Имя</div>
<input type="text" id="name" name="name" value="<? echo $name; ?>" /><br />
<div class="label">Пол</div><select id="gender" name="gender" />
<option value="Female">Женский</option>
<option value="Male">Мужской</option>
<option value="Other">Другой</option> </select><br />
<div class="label">Адрес</div><input type="text" id="address" name="address" value="<? echo $address; ?>" /><br />
<div class="label">Email</div><input type="text" id="email" name="email" value="<? echo $email; ?>" /><br />
<div class="label">Логин</div><input type="text" id="username" name="username" value="<? echo $username; ?>" /><br />
<div class="label">Пароль</div><input type="password" id="password" name="password" /><br />
<div style="margin-left:140px;"><input type="submit" name="submit" value="Отправить" /></div>
</form>
</body>
</html>


Проверку правильности заполнения формы мы будем проверять с помощью Javascript. Для этого нам понадобится:

<!-- Load jQuery and the validate plugin (Библиотека jQuery и плагин проверки валидации-->

  1. <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  2. <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Данные две строки вставляем между тегами <head> </head>.

Теперь приступаем к написанию кода проверки нужных полей и выводу необходимых нам сообщений. Код максимально попытался прокомментировать. Если, что то будет не понятно задавайте вопросы.

<!-- jQuery Form Validation code -->
<script> $(function() {
// Настраиваем валидацию формы на
#register-form $("#register-form").validate({
// Описываем правила проверки полей формы rules:
{ name: "required", gender: "required", address: "required", email: { required: true, email: true },
username: "required", password: { required: true, minlength: 5 } },
// Определяем сообщения при неправильном заполнении формы messages:
{ name: "Введите ваше имя",
gender: "Укажите ваш пол",
address: "Просьба укажите ваш Адресс",
email: "Просьба укажите ваш email",
username: "Пожалуйста введите ваш логин, для дальнейшего использования в авторизации",
password: { required: "Введите пароль", minlength: "Ваш пароль должен содержать больше 5 элементов" }
},
submitHandler: function(form) { form.submit();
} });
});
</script>

Данный код вставляем после вставленных библиотеки JQuery и плагина валидации.

По сути дела вот и все. Я не описывал стили для корректного отображения формы. Их можно посмотреть в ниже приведенном коде.

Пример можно посмотреть здесь.

Полный код:

<html>
<head> <!-- Define some CSS --> <style type="text/css"> .label {width:100px;text-align:right;float:left;padding-right:10px;font-weight:bold;} #register-form label.error, .output {color:#FB3A3A;font-weight:bold;} </style> <!-- Load jQuery and the validate plugin --> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> <!-- jQuery Form Validation code --> <script> // When the browser is ready... $(function() { // Setup form validation on the #register-form element $("#register-form").validate({ // Specify the validation rules rules: { name: "required", gender: "required", address: "required", email: { required: true, email: true }, username: "required", password: { required: true, minlength: 5 } }, // Specify the validation error messages messages: { name: "Please enter your name", gender: "Please specify your gender", address: "Please enter your address", email: "Please enter a valid email address", username: "Please enter a valid username", password: { required: "Please provide a password", minlength: "Your password must be at least 5 characters long" } }, submitHandler: function(form) { form.submit(); } }); }); </script>
</head>
<body> <?php echo $output; ?> <!-- The form that will be parsed by jQuery before submit --> <form action="./" method="post" id="register-form" novalidate="novalidate"> <div class="label">Name</div><input type="text" id="name" name="name" value="<? echo $name; ?>" /><br /> <div class="label">Gender</div><select id="gender" name="gender" /> <option value="Female">Female</option> <option value="Male">Male</option> <option value="Other">Other</option> </select><br /> <div class="label">Address</div><input type="text" id="address" name="address" value="<? echo $address; ?>" /><br /> <div class="label">Email</div><input type="text" id="email" name="email" value="<? echo $email; ?>" /><br /> <div class="label">Username</div><input type="text" id="username" name="username" value="<? echo $username; ?>" /><br /> <div class="label">Password</div><input type="password" id="password" name="password" /><br /> <div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div> </form>
</body>
</html>
29.10.2015 18:02
1250

1 комментарий

29.10.2015 18:04
Прошу прощения за некорректное обтображения всего кода. Еще не доработали всерстку и компонент-редактор отображения кода. Выделяйте, копируйте и вставляйте в блокнот для просмотра всего кода. Спасибо за понимание.
Загрузка...