Перейти к содержимому
validate-form | korygin roman
validate-form — korygin roman
Главная
Направление
Учебные задания
Новости
Статьи
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <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" class="required-label">Имя</label> <input type="text" id="name" name="name" class="required"> <label for="surname" class="required-label">Фамилия</label> <input type="text" id="surname" name="surname" class="required"> <label for="email" class="required-label">Email</label> <input type="email" id="email" name="email" class="required"> <label for="age" class="required-label">Возраст</label> <input type="text" id="age" name="age" class="required"> <label for="about">О себе</label> <input id="about" name="about"></input> <input type="submit" value="Отправить" /> </form>
jQuery(function ($) { var wasValidated = false; $("#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: "Возраст должен быть числом" } }, showErrors: function(errorMap, errorList) { if (errorList.length && !wasValidated) { var messages = $.map(errorList, function(item) { return item.message; }).join(", "); alert(messages); wasValidated = true; } } }); $("#myForm").on('submit', function (event) { event.preventDefault(); if ($(this).valid()) { alert('Форма заполнена корректно'); wasValidated = false; } }); });
body { font-family: Arial, sans-serif; } form { width: 300px; margin: 0 auto; } input, textarea { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ddd; box-sizing: border-box; } input[type="submit"] { background-color: #4CAF50; color: white; cursor: pointer; } input[type="submit"]:hover { background-color: #45a049; } .required-label::after { content: " *"; color: red; }
Results:
Имя
Фамилия
Email
Возраст
О себе