Can you post a codepen showing where it is not working?
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul").find("span").css({"color": "red", "border": "2px solid red"});
$(".inputboxmodal1").find(".error").css({"color": "red", "border": "2px solid red"});
/* 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(inputattr + inputstr); */
$(".inputboxmodal1").find(".error").css({"color": "red", "border": "2px solid red"});
$(".inputboxmodal1").on("blur .form-control .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(inputattr);
});
});
</script>
</head>
<body class="ancestors">body (great-grandparent)
<div style="width:500px;">div (grandparent)
<ul>ul (direct parent)
<li>li (child)
<span>span (grandchild)</span>
</li>
</ul>
</div>
<!-- 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">×</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>
</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>
</body>
</html>
console log not working
also another problem is in a contact form: checking input fields and text areas, alert stops at E-mail, I donât understand why.
contact
Now youâre mixing up the arguments again; the event name and the delegation selector should be separate strings. Also there is no .input-check element that is a child of .form-control, itâs the same element (which makes the .form-control selector unnecessary here). And after fixing this youâll get again the same error as before when you are trying to find('.input-check') from the .input-check element itself.
I am sorry I was wrong, this is the right code, just it has similar name to the right one.
<!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">×</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>
also alert stops at email in contact form below, I donât know why
There is still only one console.log() where you are handling blur events for the .inputboxmodal1, you donât listen to blur events for the .inputboxmodal2 at all â see my post #16 for a possible fix.
yes I am sorry for missunderstanding. I try to fix the login part then the reset part.
unfortunately the login part is not working yet, the console log is not âworking.â. as I type in the choosen field, console log should handle it to make changing in the field real time.thank you.
You are wanting the console.log to occur in realtime. The blur event isnât in realtime. Instead, the blur event triggers only when you leave the form field.
The input event is instead used to achieve things in realtime.
$(".inputboxmodal1").on("input", function() {
console.log("realtime update");
});
2 Likes
Hi Paul
thank you for help.
the problem is that the example is not working. what I donât understand , previously you gave me the console.log(âchangedâ) and it was working. now it is not working and the latest suggestion is not working neither. in fact nothing works at the moment, I donât understand why. 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">×</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-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<span class="glyphicon glyphicon-star"></span>
The fields marked with star are required.
</label>
</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-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<span class="glyphicon glyphicon-star"></span>
The fields marked with star are required.
</label>
</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");
$(".inputboxmodal1").on("input", function() {
console.log("realtime update");
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>
@toronto2009: the code you have posted above is identical to the code in post #25 (and still has the same CSS issues).
Did you try @Paul_Wilkinsâs suggestion? If so, and it didnât have the desired effect, then please post the updated code so we can see where the issue lies.
Repeatedly posting the same code saying âit doesnât workâ is not the best approach to getting help. 
3 Likes
It seems that you might have misunderstood my intentions. I did not instruct you to replace your blur event with an input event. That is almost exactly the wrong thing to do.
My reason for mentioning the input event is to help get you thinking about what parts of your code need to be done as people type each key on the input field, and what parts of the code need to wait until the blue event occurs.
To be honest, with my modal experiment I am confused, nothing works I tried. previously was working in the other examples. I donât get yet, how this console log works. please help me, thank you.
$(".inputboxmodal1").on("blur",".input-check",function(){
//$("input").blur(function(){
//console.log("changed");
//$(".inputboxmodal1").on("input", function() {
console.log("realtime update");
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');
} */
/**/
})
/**/
In post #18 I showed a screenshot that your code produced (at that stage of the thread) and you can clearly see that the console.log has written âchangedâ in the console when leaving the input. You still assert that it is not working but you donât say what is not working? (console.log just writes your information into the console. It doesnât do anything else as such.)
Are you saying that you have some working code but when you try it in a bootstrap modal it doesnât work?
If so (and hopefully the JS experts can confirm) you would need to attach your routine to something that already exists in the page and then use .on() to listen for when the element is shown.
e.g.If .inputboxmodal1 is hidden by default then I think you would need something like this.
$("body").on("blur", ".inputboxmodal1 .input-check", function() {
console.log("on blur occurred");
var inputattr = $(this).attr("name");
Hi Paul
I updated my code conform your suggestion but still as I test it typing in a chosen field changing by key stroke doesnât appear below the respective field (.error -span) as I expect conform previous example.
$("body").on("blur", ".inputboxmodal1 .input-check", function() {
console.log("on blur occurred");
//$("input").blur(function(){
//console.log("changed");
//$(".inputboxmodal1").on("input", function() {
// console.log("realtime update");
var inputattr = $(this)
// .find(".input-check")
.attr("name");
// Get the Login Name value and trim it
var inputstr = $(this)
// .find(".input-check")
.val()
.trim();
Paul already told you that âblurâ only happens after you move out of the input. You donât want to validate as a user types as thatâs very annoying.
You want to validate as the mover moves out of the input which is what blur does.
Itâs still not clear what you are trying to achieve exactly.?
1 Like
what I expect is as I click out of input, it is ânoticedâ if I click back and start typing it is also noticed, so input is updated in real time, as it is working in other examples. at the moment as I type update doesnât happen after every key stroke but as I click out. how can I fix it? can you help me with this problem? thank you, frank.
this is what I would like and I donât understand why doesnât work
update
What does this update have to do with any of your questions in this thread? Is this now the code you are using and is not working?
You never answer any of the questions fully enough for anyone here to help you.
That code you just posted seems to be doing what you are asking and uses focusin and focusout instead of blur or input. (There are errors in there but thatâs a question that has already been answered before.)
What is wrong with the updated code you just posted? Or do you want the code you just posted placed into a bootstrap modal and to still work?
1 Like
the update is just a working example I would like to achieve with my modal version. the problem is with the modal, where I would like the same as â updateâ shows. the modal example is not working as in update is presented, it doesnât update after key stroke happensâŚ
Then you just achieved it
What is wrong with it?
the modal is not working as in update is shown. console log has no effect. as you start typing in modal form updates after keystrokes doesnât happen.
Iâve just thrown your code into a bootstrap modal here. Can you tell me if this is doing what you wanted or not so we can see where we are at