Menu
hello guys.
I’m training on jQuery forms( focus, blur ) now. Here a screenshot of the form
The idea is, when a field loses focus, in image (green sign) appears to the right of it.
I used a for loop to apply the idea on all fields, but that never happens and no sign appears on blur.
=== HTML ===
<head>
<link rel=”stylesheet” href=”css/style.css”>
<script src=”js/jquery-3.3.1.min.js”></script>
<script src=”js/plugins.js”></script>
</head>
<div class=”input_container”>
<label>UserName:</label>
<input type=”text” class=”focus”>
<img class=”pass” src=”images/true.png” width=”15″ height=”15″>
<span class=”fail”>username must me at least 10 characters</span><br>
<label>Password:</label>
<input type=”password” class=”focus”>
<img class=”pass” src=”images/true.png” width=”15″ height=”15″>
<span class=”fail”>password must me at least 8 characters</span><br>
<label>e-mail:</label>
<input type=”email” class=”focus” required>
<img class=”pass” src=”images/true.png” width=”15″ height=”15″>
<span class=”fail”>error email syntax</span><br>
<label>address:</label>
<input type=”text” class=”focus”>
<img class=”pass” src=”images/true.png” width=”15″ height=”15″>
<span class=”fail”></span><br>
<label>phone:</label>
<input type=”tel” class=”focus”>
<img class=”pass” src=”images/true.png” width=”15″ height=”15″>
<span class=”fail”>Numbers only are allowed</span><br>
</div>
=== CSS ===
.pass
{
display: none;
}
.fail
{
display: none;
}
.input_container
{
border: 1px solid #000;
border-radius: 10px;
padding: 10px;
width: fit-content;
box-shadow: 2px 2px 10px;
border-bottom:
}
.input_container input
{
border-color: #f00;
border-radius: 5px;
margin-left: 10px;
}
=== jQuery===
/// focus effect
//**************
$(‘.focus’).on(‘focus’,function(){
$(this).css(‘backgroundColor’,’#ccc’)
})
// blur effect
//**************
for (var i = 1; i <= $(‘.focus’).length; i++)
{
$(‘.input_container .focus:nth-of-type(‘+i+’)’).on(‘blur’,function()
{
$(this).css(‘backgroundColor’,’transparent’)
$(‘.pass:nth-of-type(‘+i+’)’).fadeIn(1000)
}
)}