Вход

Просмотр полной версии : Не могу понять в jQuery Validation Plugin

SpaTen
08.11.2016, 16:01
Ребят, проблема такая есть форма, рядом с ней есть иконка крестика. На форме есть имя у кого прописано условие в js, мне надо что если условие верное рядом картинка менялось на другую. Я не силен в Js и прошу помощи.:cray: :cray: :cray: :cray: :cray: :cray:
Вот пример кодов:


<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 нужно вместо крестика сделать галочки если ввел все верно
рони
08.11.2016, 17:27
SpaTen,
:write:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</script>
<style type="text/css">

.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:before{
content: "\2715";
color: #FF0000;
}
.img_z16_check:before{
content: "\2714";
color: #008000;
}
.submit_z16{
padding: 5px;
}

#z17{
width: 350px;
margin: 0 auto;
text-align: center;
}

</style>
<script src="http://code.jquery.com/jquery-1.12.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>


<script>

$(function () {
var validator = $("#z16").validate({
rules: {
login_email: {
required: true,
email: true
},
login_name: {
required: true
}

}
})
var arrId = ["#login_name", "#login_email"];
$.each(arrId, function(indx, id) {
var next = $(id).next();
var fn = function() {
validator.element(id) ? next.removeClass('img_z16_mandatory').addClass('im g_z16_check') : next.removeClass('img_z16_check').addClass('img_z1 6_mandatory')
};
$(id).on("input", fn);

}
);
});
</script>
</head>
<body>
<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>

</body>
</html>
SpaTen
08.11.2016, 17:43
Спасибо большое помогло!!!