Hi
<!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>
<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
$(".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.
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:
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 u…
1 Like
yes but I do not understand why doesn’t work in here. plus the console.log. that is not working neither,thank you.
Well I do get the “changed” log after fixing the event listener arguments…
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.
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
hi
$("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');
} */
/**/
})
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.
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.
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.
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>
<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>
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 - #2 by PaulOB .
2 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).
I use separate script for the forms.login form has it’s own script and reset form also.
PaulOB
July 20, 2020, 11:14am
18
I copied that code into codepen and I see the console.log being shown ok.
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.
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();
