[SpaTen]

Ребят, проблема такая есть форма, рядом с ней есть иконка крестика. На форме есть имя у кого прописано условие в 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 нужно вместо крестика сделать галочки если ввел все верно