Перейти к содержимому
Kozochkin
Главная
Мое направление
Учебные задания
Новости
Статьи
<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">Имя</label> <input type="text" id="name" name="name" class="required"> <label for="email">Email</label> <input type="email" id="email" name="email" class="required"> <label for="surname">Фамилия</label> <input type="text" id=surname" name="surname" class="required"> <label for="age">Возраст</label> <input type="number" id=age" name="age" class="required"> <label for="aboutMe">О себе (необязательно)</label> <input type="text" id=aboutMe" name="aboutMe" class="validate"> <input type="submit" value="Отправить" /> </form>
jQuery(function ($) { $("#myForm").validate({ rules: { surname: "required", name: "required", age: "required", email: { required: true, email: true } }, messages: { surname: "Введите вашу фамилию", name: "Введите ваше имя", age: "Введите ваш возраст", email: { required: "Введите ваш email", email: "Введите некорректный email" } } }); $("#myForm").on('submit', function (event) { if ($(event.target).valid()) { alert('Форма заполнена корректно'); } event.preventDefault(); }); });
input, label { display: block; }
Results:
Имя
Email
Фамилия
Возраст
О себе (необязательно)