<button class = 'btn'>
Verify email address
</button>. btn {
background: blue;
color: #fff
font-weight: 500
}let btns = document.querySelectorAll('.modal-open');
let modal = document.querySelectorAll('.modal');
const body = document.body
function open(el) {
el.classList.add('active');
}
function close(el) {
el.target.closest('.modal').classList.remove('active')
}
btns.forEach(btn => {
btn.addEventListener('click', (e) => {
let data = e.target.dataset.open;
modal.forEach(modals => {
if(modals.dataset.modals == data || modals.dataset.modals == e.target.closest('modal-open').dataset.open) {
open(modals)
}
})
} )
modal.forEach(modals => {
modals.addEventListener('click', e => close(e))
})
})<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form class="form" id="myForm" method="post">
<input type = 'text' name = 'name' placeholder="Например Володя">
<input type = 'text' name = 'surname' placeholder="Фамилия">
<input type = 'email' name = 'email' placeholder="Почта">
<input type = 'tel' name = 'tel' placeholder="Номер телефона">
<input type = 'password' name = 'pass' placeholder="Пароль">
<input type = 'password' name = 'repass' placeholder="Подтвердите пароль">
<input type = 'submit' name = 'btn' value = 'Ок' class = 'btn btn-default'>
</form>
<script src="js/jquery-3.6.3.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>
<script src = 'js/jquery.validate.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>$('#myForm').validate({
rules: {
email: {
required: true,
email: true,
},
name: {
required: true,
minlength: 2,
},
messages: {
name: {
required: 'lorem',
minlength: 'lorem',
},
email: {
required: "We need your email",
email: 'no! example: jaguar228@gmail.com'
}
},
}
})