Перейти к содержимому
Главная страница
Новости
Учебные задания
Достопримечательности
Меню навигации
Меню навигации
Главная страница
Новости
Учебные задания
Достопримечательности
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script> <style> input, label { display: block; } </style> <div class="mycontainer"> <form id="myform" action="" method="post" class="validate"> <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">E-mail</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="bio">О себе</label> <input type="text" id="bio" name="bio" class="optional"> <input type="submit" value="Отправить"> </form> </div>
jQuery(document).ready(function($) { $("#myform").validate({ rules: { name: "required", surname: "required", email: { required:true, email:true }, age: { required:true, number:true }, bio: { required:false }, }, messages: { name: "Введите ваше имя", surname: "Введите вашу фамилию", email: { required:"Введите ваш E-mail", email:"E-mail введен неправильно" }, age: "Введите ваш возраст", } }); $("#myform").on('submit', function (event) { if ($(event.target).valid()) { alert('Поля заполнены корректно!'); } event.preventDefault(); }); });
.mycontainer { display: flex; }
Results:
Имя
Фамилия
E-mail
Возраст
О себе