Bs 3 modal form events with jquery

Hi
I try to apply a previously experimented " form event handling " with jquery, but placing my form in modal it does work partially only. sending empty form is prevented but using blur() to check the input fields by clicking on them is not working however I just use the previously experimented and used code.can I get help to get working it.thank you, frank.

<!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>
  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.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="E-mail">
						<!--<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="Password">
					    <!--<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>
		/* */
		//$('.input-check').on("blur input",function(){
		 $(".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(".input-check")
						  .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="E-mail">
					     <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="Password">
					        <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="Password">
						    <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>
1 Like

Hi @toronto2009, if you want to use event delegation the selector goes as an extra argument; i.e. change

$(".inputboxmodal1").on("blur .input-check", function () {/* ... */})

to

$(".inputboxmodal1").on("blur", ".input-check", function () {/* ... */})

HI m3g4p0p
thank you for help. the code still doesn’t work.

 $(".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(".input-check")
						  .val()
						  .trim();
				
		//$(".inputboxmodal1").find(".error").html('ok');		
		if (inputstr != "") {
		   $(".inputboxmodal1").find(".error").html('ok');	
		} else {
		   $(".inputboxmodal1").find(".error").html('empty');	
		}

the same code works in an other environment.I don’t understand it.
in this experiment it works

experiment 1

Ah yes there’s another problem – if you open the console of your browser dev tools you’ll see an

Uncaught TypeError: $(…).find(…).val() is undefined

at line 427.

Edit: Just noticed you already got the answer in your other thread with the same question:

2 Likes

yes but I do not understand why doesn’t work in here. plus the console.log. that is not working neither,thank you.
frank

Well I do get the “changed” log after fixing the event listener arguments…

https://jsfiddle.net/megapop/s47hekoa/

can you help me with that? thank you

Just check the code from the fiddle, all I did was changing "blur .input-check" to "blur", ".input-check" really… then you can fix the other error as explained by @PaulOB in your other thread.

1 Like

I’ve checked, but it doesn’t work yet. as I click on it and away, it should say empty,if click back and tyope ,it should say ok. thank you

1 Like

hi
this is my latest experiment but console log stil not working. please have a look

$("input").blur(function(){
               console.log('changed');

    
			 var inputattr = $(this)
					   //   .find(".input-check")
						  .attr("name");
			 // Get the Login Name value and trim it
			 var inputstr = $(this)
						//  .find(".input-check")
						  .val()
						  .trim();
				
		//$(".inputboxmodal1").find(".error").html('ok');
		
	
		if (inputstr != "") {
		       $(this).next().find(".error").html(inputattr+'  is ok');	
			   //$(this).find(".error").html(inputattr+'  is ok');
			} else {
			   $(this).next().find(".error").html(inputattr+'is 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');
					} */
				/**/
		})
1 Like

IDK from that JS alone I don’t see a reason why you shouldn’t get the log… just make sure to put your JS at the end of the page body to ensure the input elements exist when the script runs.

1 Like

this another experiment

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

    
			 var inputattr = $(this)
					   //   .find(".input-check")
						  .attr("name");
			 // Get the Login Name value and trim it
			 var inputstr = $(this)
						//  .find(".input-check")
						  .val()
						  .trim();
				
		//$(".inputboxmodal1").find(".error").html('ok');
		
	
		if (inputstr != "") {
		       $(this).next().find(".error").html(inputattr+'  is ok');	
			   //$(this).find(".error").html(inputattr+'  is ok');
			} else {
			   $(this).next().find(".error").html(inputattr+'is empty');	
			}

still console.log not working.
having two form one for login another for reset password, I placed login form script under login form.it should work but it doesn’t.thank you.

1 Like

All your JS should be at the bottom of the page right before the closing </body> tag, or maybe in the head but certainly not scattered across the page. Other than that I can only help you if you post the exact markup as well so that I can reproduce the problem, ideally as an SSCCE with only the minimum code required to see what’s going wrong.

1 Like

thank you
I post it right now, console log still not working

<!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>
  
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/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.4.0/js/bootstrap.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="E-mail">
						<!--<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="Password">
					    <!--<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>
			
			<!--<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="E-mail">
					     <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="Password">
					        <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="Password">
						    <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>
		
        </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>
<script>
		/* */
		
		//$(".inputboxmodal1").find(".error").html('ok');
		//$('.input-check').on("blur input",function(){
		$(".inputboxmodal1").on("blur",".input-check",function(){
        //$("input").blur(function(){
               console.log('changed');

    
			 var inputattr = $(this)
					   //   .find(".input-check")
						  .attr("name");
			 // Get the Login Name value and trim it
			 var inputstr = $(this)
						//  .find(".input-check")
						  .val()
						  .trim();
				
		//$(".inputboxmodal1").find(".error").html('ok');
		
	
		if (inputstr != "") {
		       $(this).next().find(".error").html(inputattr+'  is ok');	
			   //$(this).find(".error").html(inputattr+'  is ok');
			} else {
			   $(this).next().find(".error").html(inputattr+'is 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>
		<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>
</body>
</html>
1 Like

Off Topic:

You still have HTML-style comments in your CSS, which need to be removed.

See Bs 3 modal : glyph ok/remove not working with add/removeclass on span.

3 Likes

The one form has the class inputboxmodal1 and the other one inputboxmodal2, but you’re only listening to blur events for the 1st. Try changing the selector to

$(".inputboxmodal1, .inputboxmodal2").on(/* etc */)

or give your form containers a generic common class (e.g. just inputboxmodal).

1 Like

I use separate script for the forms.login form has it’s own script and reset form also.
so I am doing the login form right now and console log is not working. can you help me, please?thank you.

1 Like

I copied that code into codepen and I see the console.log being shown ok.

1 Like

Well I don’t see any console.log()s in the code you posted other than where you are listening to the .inputboxmodal1 blur events. It would certainly make sense to use the same logic for both forms though, as you’ll probably have a lot of repetition otherwise.

1 Like

this is the problem

//$(".inputboxmodal1").find(".error").html('ok');
		//$('.input-check').on("blur input",function(){
		$(".inputboxmodal1").on("blur",".input-check",function(){
        //$("input").blur(function(){
               console.log('changed');

    
			 var inputattr = $(this)
					   //   .find(".input-check")
						  .attr("name");
			 // Get the Login Name value and trim it
			 var inputstr = $(this)
						//  .find(".input-check")
						  .val()
						  .trim();
1 Like