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