Issue with blur in updated code

Hi Paul
thank you for help.
please help me. I don’t understand why ,previously worked out input check was working but this time don’t. I post my code. I use on(), blur as before but doesn’t work at all, also as I type email, leaving it the field remain white. please help me, thank you.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  
  <style>
	 }
    .warning {
		color:red;
	}
	.ok {
		color:green;
	}
	.inputstatus {
        position: static;
        background: #ccffcc;
		padding-top:7px;
		width:95%;
      }
      .feedback {
        float: right;
        right: 4px;
      }
      .star {
        float: left;
        left: 6px;
        color: green;
      }
      .error {
        position: relative;
        left: 12px;
      }
	
	.inputboxmodal1{
    	position:relative;
		color:green;
    }
	.inputboxmodal2{
    	position:relative;
		color:green;
    }
	.inputboxmodal1 .glyphicon-ok,
	.inputboxmodal2 .glyphicon-ok{
		position:static;
        top:4px;
        padding-right:5px;
    	padding-left:10px;
        color:green;
		
    }
	.inputboxmodal1 .glyphicon-remove,
	.inputboxmodal2 .glyphicon-remove{
		position:static;
        top:4px;
        padding-left:10px;
		padding-right:5px;
        color:red;
    }
	/* .glyphicon-ok, .glyphicon-remove{
		display: none;
		
    }*/
	
	#login{
		
		margin-left:10px;
		
	}
	
	#changepw{
		
		margin-left:10px;
		display:none;
	}
	.stylecls{
		font-size:36px;
		color:red;
    }
	.textlabel{
		color:green;
	}
	.headtextlabel{
		color:orange;
	}
	.headtextlabel2{
		color:darkred;
	}
	.iconlabel{
		color:darkred;
	}
	.headcustom{
		background-color:green;
		
	}
	.headiconlabelmain{
		font-size:60px;
		color:lightgreen;
		
		}
	.headiconlabel{
		color:purple;
		}
	.othertext{
		color:green;
	}
	.backgroundbody,
	.footer{
		background-color:#ccffcc;
	}
	input[type=email],
	input[type=password]{
	    width:95%;
		background-color:lightgreen;
		border:none;
		box-shadow:none;
		border-bottom: 5px solid green;
	}
	input[type=email]:hover{
		background-color:lightgreen;
		border:none;
		box-shadow:none;
		border-bottom: 5px solid red;
	}
	input[type=password]:hover{
		background-color:lightgreen;
		border:none;
		box-shadow:none;
		border-bottom: 5px solid red;
	}
	<!-- Place holder modallogin start -->
	form.modallogin .form-control::-moz-placeholder {
		color: orange;
	  opacity: 1;
	}
	form.modallogin .form-control:-ms-input-placeholder {
	   color: orange;
	   opacity: 1;
	}
	form.modallogin .form-control::-webkit-input-placeholder {
	   color: orange;
	}
	form.modallogin .form-control::-o-placeholder {
		color: orange;
	  opacity: 1;
	}
	form.modallogin .form-control::-placeholder {
		color: orange;
	  opacity: 1;
	}
	<!-- Place holder modalresetpw start -->
	form.modalresetpw .form-control::-moz-placeholder {
		color: orange;
	  opacity: 1;
	}
	form.modalresetpw .form-control:-ms-input-placeholder {
	   color: orange;
	   opacity: 1;
	}
	form.modalresetpw .form-control::-webkit-input-placeholder {
	   color: orange;
	}
	form.modalresetpw .form-control::-o-placeholder {
		color: orange;
	  opacity: 1;
	}
	form.modalresetpw .form-control::-placeholder {
		color: orange;
	  opacity: 1;
	}
	
	@media screen and (max-width: 600px) {
		.divchangepw{
		width:100%;
	}
	}

	@media screen and (min-width: 480px) {
    .title {
    font-size: 36px;
	text-align:center;
    }
    .titleh3{
		font-size: 28px;
	}
	
   /*  Place holder end ^/
	/*
	.divchangepw{
		width:160px;
		//background-color:pink;
	*/
	.button1{
		float:right;
		margin-left:20px;
		display:inline-block;
		
	}
	.button1color1{
		background-color:green;
		color:white;
		}
	.button1color2{
		background-color:green;
		color:white;
		}	
	.button1color1:hover,
	.button1color2:hover{
		background-color:darkgreen;
		color:white;
		}	
	.button2color{
		background-color:pink;
		color:purple;
		}
	.button2color:hover{
		background-color:orange;
		color:green;
		}
	.cancel1{
		background-color:red;
		color:white;
		float:left;
		margin-left:20px;
		
	}
	.cancel1:hover{
		background-color:darkred;
		color:yellow;
	}
}
/*
@media screen and (max-width: 480px) {
    .title {
    font-size: 28px;
	text-align:center;
	}
	.headiconlabelmain{
		font-size:48px;
		color:lightgreen;
		
		}
    .button1{
		width:100%;
		margin-left:0px;
		display:block;
		margin-bottom:20px;
	}
	.button1color1{
		background-color:green;
		color:white;
		}
	.button1color2{
		background-color:green;
		color:white;
		}	
	.button1color1:hover,
	.button1color2:hover{
		background-color:darkgreen;
		color:white;
		}		
	.button2color{
		background-color:pink;
		color:purple;
		}
	.button2color:hover{
		background-color:orange;
		color:white;
		}	
	.cancel1{
		width:100%;
		background-color:red;
		color:white;
		float:left;
		margin-bottom: 20px;
		
	}
	.cancel1:hover{
		background-color:darkred;
		color:yellow;
	}
	.paragraph, #changepw{
		padding-top:10px;
	} 
	.titleh3{
		font-size: 22px;
	}
	<!--
	.divchangepw{
		width:100%;
	}-->
} */
  </style>
 <script>
	$(document).ready(function(){
		$("#changepsw").on("click", function(){
			$("#login").css("display","none");
		    $("#changepw").css("display","block");
			//e.preventDefault();
		});
		$("#changepsw2").on("click", function(){
			$("#login").css("display","none");
		    $("#changepw").css("display","block");
			//e.preventDefault();
		});
		$("#login2").on("click", function(){
			$("#login").css("display","block");
		    $("#changepw").css("display","none");
			//e.preventDefault();
		});
	});
 </script>

</head>
<body>

<div class="container">
  <h2  >Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header headcustom">
          <button type="button" class="close stylecls" data-dismiss="modal">&times;</button>
		 <h1 class="title"><span class="glyphicon headiconlabelmain glyphicon-user"></span></h1>	 
		 <h2 class="title headtextlabel"> Restasurant Virtually</h2>	
		 
        </div>
        <div class="modal-body backgroundbody">
          
		<!--<div class="container"></div>
		<div class="container">	</div>
			 <form class="container-fluid" action="/action_page.php">-->

    		
			<form id="login" class="form-horizontal container-fluid modallogin">
				<div class="row">
					<div class="form-group">
					<label class="control-label col-sm-3" for="email"> </label>
					<div class="col-sm-9">
						<h3 class="modal-title headtextlabel2 titleh3">
						<span class="glyphicon glyphicon-log-in headiconlabel"></span> Log in</h3>
					</div>
					</div>
					
					<div class="form-group inputboxmodal1">
					
					  <label class="control-label textlabel col-sm-3" for="email">
					  <span class="glyphicon iconlabel glyphicon-envelope"></span>  Email :</label>
					  <div class="col-sm-9">
						<input type="email" class="form-control input-check" id="email" placeholder="Enter email" name="email">
						<!--<span class="glyphicon glyphicon-remove fielderror" style=""></span>-->
					        <div class="inputstatus">
								<span class="glyphicon  glyphicon-star star"></span>
								<span class="error">Your email</span>
								<span class="feedback"></span>
							</div>
					  </div>
					  
					</div>
					<div class="form-group inputboxmodal1">
					  <label class="control-label textlabel col-sm-3" for="pwd">
					  <span class="glyphicon iconlabel glyphicon-lock"></span>  Password :</label>
					  <div class="col-sm-9">          
						<input type="password" class="form-control input-check" id="pwd" placeholder="Enter password" name="pwd">
					    <!--<span class="glyphicon glyphicon-ok fielderror" style=""></span>-->
					        <div class="inputstatus">
							    <span class="glyphicon  glyphicon-star star"></span>
							    <span class="error">Your password</span>
							    <span class="feedback"></span>
							</div>
					 </div>
					</div>
					<div class="form-group">        
					  <div class="col-sm-offset-3 col-sm-9">
						<div class="checkbox textlabel">
						  <label><input type="checkbox" name="remember"> Remember me</label>
						</div>
					  </div>
					</div>
					<div class="form-group">        
					  <div class="col-sm-offset-3 col-sm-9">
						<button type="reset" class="btn btn-default button1 button2color">Reset</button>
					  
						<button type="submit" class="btn btn-default button1 button1color1">Submit</button>
						<!--<div class="divchangepw" ></div>-->
												
					  </div>
					</div>
					<div class="form-group">        
					  <div class="col-sm-offset-3 col-sm-9">
						
						<!--<div class="divchangepw" ></div>-->
						<p class="paragraph othertext">Forgot password ?<a href="#" id="changepsw"> Change password</a></p>
						
					  </div>
					</div>
				</div>
			</form>
		<script>
		/* */
		$(".inputboxmodal1").on("blur .input-check",function(){
               console.log('changed');
			 var inputattr = $(this)
					      .find(".input-check")
						  .attr("name");
			 // Get the Login Name value and trim it
			 var inputstr = $(this)
						  .find(".form-control")
						  .val()
						  .trim();
				
		//$(".inputboxmodal1").find(".error").html('ok');		
		if (inputstr != "") {
		   $(".inputboxmodal1").find(".error").html('ok');	
		} else {
		   $(".inputboxmodal1").find(".error").html('empty');	
		}
		 //$(this).val(name);
		 // Check if empty of not    
		/*	if (inputstr === "") {
				if (inputattr === "email") {
					 var inputstr = $(this).find(".input-check").val().trim();
					 var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; /*
						if(!emailReg.test(inputstr) | (inputstr.length <0)) {
							// email
							$(this).next().find(".error").html(inputattr + " is Incorrect: Please enter Email address correctly ");
							$(this).next().find(".error").addClass('warning').removeClass('ok');
						} else {
							$(this).next().find(".error").html(inputattr + " is Ok : Your data has been entered correctly ");
							$(this).next().find(".error").addClass('ok').removeClass('warning');
						 /
						 */
				/*	} 	
			    } else {
						
						$(this).next().find(".error").html(inputattr+" is EMPTY: Please enter data into this input");
						$(this).next().find(".error").addClass('warning').removeClass('ok');
					} */
				/**/
		})
		/**/
			$(".button1color1").click(function() {
				  $(".inputboxmodal1").each(function() {
					var st = $(this)
					  .find(".input-check")
					  .attr("name");
					var st2 = $(this)
					  .find(".input-check")
					  .val()
					  .trim();
					if (
					  $(this)
						.find(".input-check")
						.val()
						.trim() != ""
					) {
					  //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is OK ");
					  //$(this).find(".fielderror").text("Your " + st + " is OK ");
					  $(this)
						//.next()
						.find(".error")
						.html("Your " + st + " is OK ");
					  $(this)
						.find(".error")
						.css("color", "green");
					  
					  $(this)
						//.next()
						.find(".feedback")
						//.html("Your " + st + " is OK ")
						.removeClass("glyphicon glyphicon-remove warning")
						.addClass("glyphicon glyphicon-ok ok");
					  $(this)
						.next()
						.find(".error")
						.removeClass("warning")
						.addClass("ok");
					 
					  //alert(st2);
					} else {
					  //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is empty");
					  $(this)
						//.next()
						.find(".error")
						.html("Your " + st + " is empty ");
					  $(this)
						.find(".error")
						//.css("background-color", "pink");
						.css("color", "red");
					  $(this)
						//.next()
						.find(".feedback")
						.removeClass("glyphicon glyphicon-ok ok")
						.addClass("glyphicon glyphicon-remove warning");
					  $(this)
						//.next()
						.find(".error")
						.removeClass("ok")
						.addClass("warning");

					  event.preventDefault();
					}

					//alert("The " + st +  " was clicked. it is " + st2);
				  });
			});
      
		</script>	
			<!--<form id="changepw" class="form-horizontal container-fluid modalresetpw" action="/action_page.php">-->
			<form id="changepw" class="form-horizontal container-fluid modalresetpw">
				<div class="row">
					<div class="form-group">
					<label class="control-label col-sm-3" for="email"> </label>
					<div class="col-sm-9">
						<h3 class="modal-title headtextlabel2 titleh3">
						<span class="glyphicon headiconlabel glyphicon-lock"></span> Change password</h3>
					</div>
					</div>
					<div class="form-group inputboxmodal2">
					  <label class="control-label textlabel col-sm-3" for="email">
					  <span class="glyphicon iconlabel glyphicon-envelope"></span>  Email :</label>
					  <div class="col-sm-9">
						<input type="email" class="form-control input-check" id="email" placeholder="Enter email" name="email">
					     <div class="inputstatus">
							<span class="glyphicon  glyphicon-star star"></span>
							<span class="error">Your email</span>
							<span class="feedback"></span>
						</div>   
					  </div>
					  
					</div>
					<div class="form-group inputboxmodal2">
					  <label class="control-label textlabel col-sm-3" for="pwd">
					  <span class="glyphicon iconlabel glyphicon-eye-open"></span>  Password :</label>
					  <div class="col-sm-9">          
						<input type="password" class="form-control input-check" id="pwd" placeholder="Type password" name="pwd">
					        <div class="inputstatus">
							    <span class="glyphicon  glyphicon-star star"></span>
							    <span class="error">Your password</span>
							    <span class="feedback"></span>
							</div>
					  </div>
					</div>
					<div class="form-group inputboxmodal2">
					  <label class="control-label textlabel col-sm-3" for="pwd">
					  <span class="glyphicon iconlabel glyphicon-eye-open"></span>  Password :</label>
					  <div class="col-sm-9">          
						<input type="password" class="form-control input-check" id="pwd" placeholder="Retype password" name="pwd">
						    <div class="inputstatus">
							  <span class="glyphicon  glyphicon-star star"></span>
							  <span class="error">Your password retype</span>
							  <span class="feedback"></span>
							</div>
					  </div>
					</div>
					<div class="form-group">        
					  <div class="col-sm-offset-3 col-sm-9">
						<div class="checkbox textlabel">
						  <label><input type="checkbox" name="remember"> Remember me</label>
						        
						</div>
					  </div>
					</div>
					<div class="form-group">        
					  <div class="col-sm-offset-3 col-sm-9">
						<button type="reset" class="btn btn-default button1 button2color">Reset</button>
					  
						<button type="submit" class="btn btn-default button1 button1color2">Submit</button>
						
					 </div>
					</div>
					<div class="form-group">        
					  <div class="col-sm-offset-3 col-sm-9">
						
						<p class="othertext"><a href="#" id="login2"> Log in</a> here
						</p>
					 </div>
					</div>
				</div>	
			</form>
		<script>
			$(".button1color2").click(function() {
				  $(".inputboxmodal2").each(function() {
					var st = $(this)
					  .find(".input-check")
					  .attr("name");
					var st2 = $(this)
					  .find(".input-check")
					  .val()
					  .trim();
					if (
					  $(this)
						.find(".input-check")
						.val()
						.trim() != ""
					) {
					  //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is OK ");
					  //$(this).find(".fielderror").text("Your " + st + " is OK ");
					  $(this)
						//.next()
						.find(".error")
						.html("Your " + st + " is OK ");
					  $(this)
						.find(".error")
						.css("color", "green");
					  
					  $(this)
						//.next()
						.find(".feedback")
						//.html("Your " + st + " is OK ")
						.removeClass("glyphicon glyphicon-remove warning")
						.addClass("glyphicon glyphicon-ok ok");
					  $(this)
						.next()
						.find(".error")
						.removeClass("warning")
						.addClass("ok");
					 
					  //alert(st2);
					} else {
					  //$($(this).nextAll(".inputstatus")).find(".fielderror").text("Your " + st + " is empty");
					  $(this)
						//.next()
						.find(".error")
						.html("Your " + st + " is empty ");
					  $(this)
						.find(".error")
						//.css("background-color", "pink");
						.css("color", "red");
					  $(this)
						//.next()
						.find(".feedback")
						.removeClass("glyphicon glyphicon-ok ok")
						.addClass("glyphicon glyphicon-remove warning");
					  $(this)
						//.next()
						.find(".error")
						.removeClass("ok")
						.addClass("warning");

					  event.preventDefault();
					}

					//alert("The " + st +  " was clicked. it is " + st2);
				  });
			});
      
		</script>
        </div>
        <div class="modal-footer footer">
          <button type="button" class="btn btn-default cancel1" data-dismiss="modal">Close</button>
		  <p class="othertext">Forgot password?<a href="#" id="changepsw2"> Change password</a></p>
		   <p class="othertext">Not member?<a href="#"> Sign up</a></p>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Hi I’m not back at a computer until Monday but this looks wrong to me.

What dies the Dev tools console say about that function.

Is there an event called .input-check ?

Shouldn’t it just be blur.

Hi Paul
thank you. can you help me with that? to be honest not really understznd it. on dev tool inputstr got red dot with x. and nothing works as in my other experiments. please help me.

What was your previous code exactly so we can see what you changed that broke it?

At present you are looking for a blur on a modal but modals don’t have a blur. You should be adding the events to inputs.

e.g

$(".inputboxmodal1 .input-check").on("blur",function(){
               console.log('changed');

Of course that makes nonsense of the rest of that routine.

Hi Paul
this what was working, at least it looks like, it might have problems.

https://codepen.io/cfrank2000/pen/jOWQXPX[https://codepen.io/cfrank2000/pen/jOWQXPX](https://codepen.io/cfrank2000/pen/jOWQXPX)

Blockquote

I think my reply above was inaccurate and this thread should be moved to the JS forum for better support :slight_smile:

1 Like

Done. smile

1 Like

Hi Paul
Thank you. If I am right, it is better to to start a new thread,
By the way I corrected the mistake that I can see.

$(".inputboxmodal1").on("blur .input-check",function(){
               console.log('changed');

it is not working as it was in other examples, Can you point my attention to the problem?thank you, frank
I am expecting to get real time input changing and control of ok/remove icons.

That doesn’t look right to me I think it should be:

$(".inputboxmodal1").on("blur”, “.input-check",function(){
               console.log('changed');

Note the closing quote and comma after the word blur.

Also now that input-check is the source of the tracked event then $(this) will refer to the input-check element and you therefore won’t need to find it as you are trying here.

var inputattr = $(this).find(".input-check")

$(this) already refers to input-check.

I’m not back at my computer until tomorrow but I think you need more expert js help than mine :slight_smile:

1 Like

See Bs 3 modal form events with jquery