Перейти к содержимому
Мой Сайт
Главная
Бизнес Информатика
Веб Программирование
Новости
Мои Статьи
<form id="myForm"> <label for="name">Имя</label> <input type="text" id="name" name="name" class="required"> <label for="surname">Фамилия</label> <input type="text" id="surname" name="surname" class="required"> <label for="email">Email</label> <input type="email" id="email" name="email" class="required"> <label for="age">Возраст</label> <input type="number" id="age" name="age" class="required"> <label for="about">О себе</label> <input type="text" id="about" name="about"> <input type="submit" value="Отправить" /> </form> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> <script src="script.js"></script>
jQuery(function ($) { $("#myForm").validate({ rules: { name: "required", surname: "required", email: { required: true, email: true }, age: { required: true, number: true } }, messages: { name: "Введите ваше имя", surname: "Введите вашу фамилию", email: { required: "Введите ваш email", email: "Введите корректный email" }, age: { required: "Введите ваш возраст", number: "Введите корректный возраст (число)" } } }); $("#myForm").on('submit', function (event) { if ($(event.target).valid()) { alert('Форма заполнена корректно'); } event.preventDefault(); }); }); // Добавим стили для элементов $("input, textarea, label").addClass("form-control");
Results:
Имя
Фамилия
Email
Возраст
О себе