Перейти к содержимому
×
Главная
Бизнес-информатика
Web-программирование
Новости
Статьи
☰ Меню
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script> <form id="myForm" action="" method="post" class="validate"> <label for="name">Имя <span class="reauired-name">(обязательное поле)</span></label> <input type="text" id="name" name="name" class="required"> <label for = "surname">Фамилия <span class="reauired-surname">(обязательное поле)</span></label> <input type="text" id="surname" name="surname" class="required"> <label for="email">Email <span class="reauired-email">(обязательное поле)</span></label> <input type="email" id="email" name="email" class="required"> <label for="age">Возраст <span class="reauired-age">(обязательное поле)</span></label> <input type="text" id="age" name="age" class="required"> <label for="about">О себе</label> <input type="text" id="about" name="about"> <input type="submit" value="Отправить" /> </form>
jQuery(function ($) { $("#myForm").validate({ rules: { name: "required", surname: "required", email: { required: true, email: true }, age: { required: true, digits: true } }, messages: { name: "Введите ваше имя", surname: "Введите вашу фамилию", email: { required: "Введите ваш email", email: "Введён некорректный email" }, age: { required: "Введите ваш возраст", digits: "Возраст должен быть числом" } } }); $("#myForm").on('submit', function (event) { if ($(event.target).valid()) { alert('Форма заполнена корректно'); } event.preventDefault(); }); });
input, label { display: block; } .reauired-name { color: red; } .reauired-surname { color: red; } .reauired-email { color: red; } .reauired-age { color: red; }
Results:
Имя
(обязательное поле)
Фамилия
(обязательное поле)
Email
(обязательное поле)
Возраст
(обязательное поле)
О себе