Ребят, проблема такая есть форма, рядом с ней есть иконка крестика. На форме есть имя у кого прописано условие в js, мне надо что если условие верное рядом картинка менялось на другую. Я не силен в Js и прошу помощи.
Вот пример кодов:
<form id="z16" method="post" action="" style="display:block;">
<label>Пожалуйста, заполните обязательные поля.</label>
<br>
<ul>
<li>
<div class="lable_block"><label for="login_name">Имя:</label></div>
<input type="text" id="login_name" name="login_name" size="20" minlength="3" required
data-msg-required="Введите Имя" data-msg-minlength="Имя должно иметь минимум 3 символа" aria-required="true" aria-invalid="true">
<div class="img_z16 img_z16_mandatory"></div>
</li>
<li>
<div class="lable_block"><label for="Ege_name">Возраст:</label></div>
<input type="number" size="1" min="1" max="99" value="1" style="width:35px;">
<div class="img_z16 img_z16_check"></div>
</li>
<li>
<div class="lable_block"><label for="login_email">E-mail:</label></div>
<input type="email" id="login_email" name="login_email" size="20" required
data-msg-required="Вы забыли написать свой email"
data-msg-email="Обязательно нужно написать @ и .!!!" aria-required="true" aria-invalid="true">
<div class="img_z16 img_z16_mandatory"></div>
</li>
<li>
<div class="lable_block"><label for="Sit_name">Сайт:</label></div>
<input type="text" name="name" size="20">
<div class="img_z16 img_z16_check"></div>
</li>
<li>
<input class="submit_z16" type="submit" value="Отправить">
</li>
</ul>
</form>
.z16{
width: 700px;
height: 300px;
margin-left: 20px;
}
.z16 label{
padding: 10px;
padding-left: 0;
}
.lable_block{
width: 100px;
display: inline-block;
}
.z16 ul li{
list-style: none;
padding: 10px 0px 10px 0px;
}
.z16 ul li input{
}
.img_z16{
width: 18px;
height: 18px;
vertical-align: middle;
text-align: center;
display: inline-block;
background-repeat: no-repeat;
background-size: cover;
}
.img_z16_mandatory{
background-image: url(../img/krest.png);
}
.img_z16_check{
background-image: url(../img/chek.png);
}
.submit_z16{
padding: 5px;
}
#z17{
width: 350px;
margin: 0 auto;
text-align: center;
}
$(document).ready(function () {
$('#z16').validate(function () {
$.validate("#login_email", {
rules: {
login_email: {
required: true,
},
email: {
required: true,
email: true,
},
},
});
});
$('#z16').validate(function () {
$.validate("#login_name", {
rules: {
login_name: {
required: true,
},
},
});
});
(тут я начал пытаться поменять картинки, я понимаю что нужно заменить классы но не получается)
$( ".img_z16_mandatory" ).change(function() {
el.classList.remove('.img_z16_mandatory');
el.classList.add('.img_z16_check');
}
});
http://prnt.sc/d4m9vp нужно вместо крестика сделать галочки если ввел все верно
