Please post your updated code.
No you are controlling many styles with jquery.
e.g.
$(".re-field").on("mouseleave", function () {
$(".re-field").css("background-color", "lightgreen");
});
1 Like
Did you post the wrong link by mistake? That seems to be the same CodePen you linked to in your first post.
I updated the js, conform instruction, the rest looks ok
That codepen is nonsense.
You have scripts and links in the JS panel and they don’t go there. You need to link to all your external files in the settings menu (css and js). You have already been shown this.
Try again 
The inputs are darkgreen in that codepen because that’s what you told them to be here.
.inputbgr_reg:focus {
background-color: darkgreen;
border-color: darkgreen;
color: purple;
}
If the JS was working that colour will be something else.
1 Like
thank you. I found another anomaly. the field I type, goes above main menu as I scroll it, can I get help? thank you.
I tried the settings but I don’t know how to do it.
the new code
register
You also need to place all the CSS in the CSS panel, and all the JS in the JS panel. Also, as requested numerous times, please remove all the unnecessary clutter of commented-out code.
I tried to separate code conform instructionsbut it is worse then before, please have a look, thank you.
registration
You didn’t add any of the external files at all?
You should be putting jquery and bootstrap js in the js settings and the css files in the css settings.
Here’s a screenshot of the JS settings tab open and the links are blank
Here is a screenshot of the CSS tab with the css files added correctly.
Adjust the z-index on the main-menu parent so that is is higher than that of the errand item. You have it set inline to z-index:3 so raise it to 99 or at least higher than any other z-indexes on the page.
1 Like
thank you I raised it to 5 it works but adding css file or js file is a problem those are on my laptop settings expects them as http…(as published site) please help me.
copy and paste obviously doesn’t work, posting neither, upload neither, can I get help? thank you.
I feel I screwed up with codepen, can I get help? thank you.
What with ?
Setting up codepen or an html css issue.?
I think I answered your html/css issues already.
If you want help with setting up codepen then post your real html in here.
Then post your local css in here also (the one’s linked to in your head). Then post your local scripts in here (the ones that you have local urls for).
I will then show how to transfer to codepen.
1 Like
Hi
here I posty my html part then css an js
<div class="fix-rel" style="z-index:5;">
<nav class="navbar navbar-default navbar-custom ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle icon" data-toggle="collapse" data-target="#myNavbar">
<span class="inner-icon">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
</span>
</button>
<a class="navbar-brand" href="#">INet Restaurant </a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div class="flex-container">
<div class="flex-main" style="">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">
<span class="glyphicon glyphicon-home"></span> Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-earphone"></span> Contact Us <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu1">
<li><a href="contactus.html">On our site</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">On Facebook</a></li>
<li><a href="#">On Twitter</a></li>
</ul>
</li>
<li><a href="table.html">Table</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span> Menu <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu2">
<li class="dropdown-header "></li>
<li ><a href="table.html"> Table</a></li>
<li role="separator" class="divider"></li>
<li ><a href="./maincourse/pizza.html"> Pizza</a></li>
<li ><a href="./maincourse/pasta.html"> Pasta</a></li>
<li class=" main1"><a href="./maincourse/lazagna.html"> Lasagna</a></li>
<li role="separator" class="divider"></li>
<li ><a href="./options/appetizer.html"> Appetizers</a></li>
<li ><a href="./options/sallad.html"> Sallads</a></li>
<li ><a href="./options/dessert.html" >Desserts</a></li>
<li role="separator" class="divider"></li>
<li ><a href="./drinks/alcoholicdrink.html"> Alcoholic Drinks</a></li>
<li ><a href="./drinks/nonalcoholicdrink.html"> Non Alcoholic Drinks</a></li>
<li role="separator" class="divider"></li>
<li ><a href="lunchbuffet.html"> Lunch Buffet</a></li>
<li ><a href="weekendbrunch.html"> Weekend Brunch</a></li>
</ul>
</li>
<li><a href="order.html">Order</a></li>
<li><a href="news.html">News</a></li>
</ul>
</div>
<div class="flex-side" style="">
<ul class="nav navbar-nav navbar-right navbar-navside1">
<li><a href="registration.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="container-fluid" style="z-index:2;">
<div class="jumbotron jumbo toppadding" style="z-index:1;">
<a href="#"><h2 class="center1">INET Restaurant</h2></a>
<p class="center1">Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive, mobile-first projects on the web.</p>
<p class="center1">The home of the INET Restaurant</p>
<p class="center1">Registration</p>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<div class="row main-content">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="panel panel-default headcustomsd bodycustomsd">
<div class="panel-heading "> <h1>Registration Form</h1></div>
<div class="panel-body ">
<div class="bs-example">
<form class="form-horizontal register registration"
action="/examples/actions/confirmation.php" method="post" style="z-index:1;">
<div class="form-group">
<label class="control-label col-sm-3" for="fname">
<span class="glyphicon glyphicon-star starrq"></span> First Name :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 fst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="email" class="form-control check inputbgr_reg fst-name-field"
id="fname" placeholder="Enter First Name" name="First Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your email</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="lastName3">
<span class="glyphicon glyphicon-star"></span> Last Name :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 lst-name-glyph">
<i class="glyphicon glyphicon-user"></i></span>
<input type="email" class="form-control check inputbgr_reg lst-name-field"
id="lastName3" placeholder="Enter Last Name" name="Last Name">
</div>
<div class="inputstatus">
<span class="error">Please enter your last or family name.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="email3">
<span class="glyphicon glyphicon-star"></span> Email Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 email-glyph">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</span>
<input id="email3" type="text" class="form-control check inputbgr_reg email-field"
name="E-mail" placeholder="E-mail">
</div>
<div class="inputstatus">
<span class="error">Please enter your E-mail.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="phoneNumber3">
<span class="glyphicon glyphicon-star"></span> Phone Number :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 phone-glyph">
<i class="fa fa-phone" aria-hidden="true"></i>
</span>
<input type="tel" class="form-control check inputbgr_reg phone-field"
id="phoneNumber3" placeholder="Phone Number" name="Phone Number">
</div>
<div class="inputstatus">
<span class="error">Please enter your phone number.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<!-- <label class="control-label col-sm-3" for="areacode3 telnum3">Contact Tel. :</label> -->
<label class="control-label col-sm-3" for="areacode3">Contact Tel. :</label>
<div class="col-sm-9">
<span class="input-group-addon glyph3 phone2-glyph" style="width:6%;height:34px;float:left;">
<i class="fa fa-phone" aria-hidden="true"></i>
</span>
<input id="areacode3" type="tel" name="areacode" class="form-control inputbgr_reg phone2-field" placeholder="Area code" style="width:34%;float:left;">
<input id="telnum3" type="tel" name="phone" class="form-control inputbgr_reg phone2-field" placeholder="Phone number" style="width:60%;float:left;">
</div>
<div class="col-xs-12 col-sm-12">
<!-- <div class="control-label col-xs-3" for="telnum3"> </div>-->
<div class="control-label col-xs-3"> </div>
<div class="col-xs-12 col-sm-9">
<div class="help-block with-errors texttel1" style="width:40%;float:left;" >Please enter your areacode</div>
<div class="help-block with-errors texttel1" style="width:60%;float:left;">Please enter your phone</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="postalAddress">
<span class="glyphicon glyphicon-star"></span> Postal Address :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 address-glyph">Postal :</span>
<textarea rows="3" class="form-control check inputbgr_reg address-field"
id="postalAddress" name="Postal Address" placeholder="Postal Address"></textarea>
</div>
<div class="inputstatus">
<span class="error">Please enter your postal address.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="ZipCode3">
<span class="glyphicon glyphicon-star"></span> Zip Code :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 zip-glyph">zip code</span>
<input type="text" class="form-control check inputbgr_reg zip-field"
id="ZipCode3" name="zip code" placeholder="Zip Code">
</div>
<div class="inputstatus">
<span class="error">Please enter your ZIP code.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group" >
<label class="control-label col-sm-3" for="your-city">
<span class="glyphicon glyphicon-star"></span> City:</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 city-glyph">City</span>
<div data-toggle="collapse" data-target="#demo1">
<input type="text" class="form-control check inputbgr_reg city-field"
id="your-city"
placeholder="Enter your City"
name="Your City">
</div>
</div>
<div class="inputstatus">
<span class="error">Please click on the input field for the list of cities.</span>
<span class="feedback"></span>
</div>
<div id="demo1" class="collapse">
<h4>List of available cities</h4>
<ul class="list-group">
<li class="list-group-item">London</li>
<li class="list-group-item">Birmingham</li>
<li class="list-group-item">Brighton</li>
<li class="list-group-item">Cardiff</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwd">
<span class="glyphicon glyphicon-star"></span> Password :</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 pwd-glyph">
<i class="fa fa-lock"></i>
</span>
<input id="pwd" type="text" class="form-control check inputbgr_reg pwd-field"
name="Password" placeholder="Enter Password">
</div>
<div class="inputstatus">
<span class="error">Please enter your password.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="pwdre">
<span class="glyphicon glyphicon-star"></span> Retype Password:</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon glyph3 re-glyph">
<i class="fa fa-lock"></i>
</span>
<input id="pwdre" type="text" class="form-control check inputbgr_reg re-field"
name="Retype Password" placeholder="Retype Password">
</div>
<div class="inputstatus">
<span class="error">Please retype your password.</span>
<span class="feedback"></span>
</div>
</div>
</div>
<div class="dropdown">
<label class="control-label col-xs-3 " >Please Choose </label>
<div class=" col-xs-9 ">
<div class="row">
<div class=" col-xs-6 col-sm-3 col-md-3 col-lg-6 ">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default buttonsocial dropdown-toggle"> Style <span class="caret"></span></button>
<ul class="dropdown-menu button21">
<li><a href="#">Style-1</a></li>
<li class="divider"></li>
<li><a href="#">Style-2</a></li>
<li><a href="#">Style-3</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default buttonsocial dropdown-toggle"> Font height<span class="caret"></span></button>
<ul class="dropdown-menu button21">
<li><a href="#">Style-1</a></li>
<li class="divider"></li>
<li><a href="#">Style-2</a></li>
<li><a href="#">Style-3</a></li>
</ul>
</div>
</div>
<div class=" col-xs-6 col-sm-3 col-md-3 col-lg-6 ">
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default buttonsocial dropdown-toggle"> Language <span class="caret"></span></button>
<ul class="dropdown-menu button31">
<li><a href="#">English</a></li>
<li class="divider"></li>
<li><a href="#">Hungarian</a></li>
<li><a href="#">Romanian</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default buttonsocial dropdown-toggle"> Cities <span class="caret"></span></button>
<ul class="dropdown-menu button31">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">London</a></li>
<li role="presentation" class="divider"></li>
<li ><a href="#">Cardiff</a></li>
<li ><a href="#">Manchester</a></li>
<li ><a href="#">Brighton</a></li>
<li ><a href="#">Bristol</a></li>
<li ><a href="#">Birmingham</a></li>
<li ><a href="#">Swansea</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<h5><label class="control-label col-xs-3" >How can we<br> contact you ?</label></h5>
<div class="col-xs-9">
<div class="input-group">
<label class="container"> Phone
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container"> E-mail
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container"> Post
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Gender :</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="genderRadios" value="male" required> Male
</label>
</div>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="genderRadios" value="female" required> Female
</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="news"> Send me latest news and updates.
</label>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<label class="checkbox-inline">
<input type="checkbox" value="agree"> I agree to the <a href="#">Terms and Conditions</a>.
</label>
</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>
<br>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-9">
<input class="regsmt btn1" type="submit" value="Submit">
<input class=" regreset" type="reset" onclick="myFunction()" value="Reset form">
</div>
</div>
</form>
</div>
</div>
<div class="panel-footer footercustomsd"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<!--Nested rows within a column-->
<div class="row ">
<div class="col-xs-12 col-sm-6 col-md-12">
<div class="sidebar-content">
<div class="panel panel-default headcustomsd bodycustomsd">
<div class="panel-heading "><h2 >Offer of the Week</h2></div>
<div class="panel-body ">
Try our wonderful <span class="red">new</span> Margherita.<br />
A better recipe and virtually tastier than ever. <br />
Enjoy every byte!
</div>
<div class="panel-footer footercustomsd"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-12">
<div class="sidebar-content">
<div class="panel panel-default headcustomsd bodycustomsd">
<div class="panel-heading"><h2 >Social Media</h2></div>
<div class="panel-body">
<ul class="nolistmark">
<li>
<!--<button type="button" class="btn btn-lg btn-fb">-->
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-facebook left"> Facebook</i></button>
</li>
<li>
<!--<button type="button" class="btn btn-tw">-->
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-twitter left"> Twitter</i></button>
</li>
<li>
<!--<button type="button" class="btn btn-li">-->
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-linkedin left"></i> Linkedin</button>
</li>
<li>
<!--<button type="button" class="btn btn-ins">-->
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-instagram left"></i> Instagram</button>
</li>
<li>
<button type="button" class="btn1 buttonsocial" href="#">
<i class="fa fa-wordpress left"> Wordpress</i>
</button>
</li>
</ul>
</div>
<div class="panel-footer footercustomsd"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="z-index:2;" >
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fluid bottompadding">
<div class="sidebar-content bottommargin">
<div class="panel panel-default headcustomsd bodycustomsd">
<div class="panel-heading headcustomsd"><h2>Address</h2></div>
<div class="panel-body bodycustomsd">
<address>Virtual Pizza Restaurant Ltd.<br>
1, Pizza Avenue<br>
Pizza House, London<br>
PI1 2ZA<br>
Great Britain<br>
Tel.: +44 1234 5678<br>
Fax: +44 8765 4321<br>
Email: info<code>@</code>vpp.com
</address>
</div>
<div class="panel-footer footercustomsd"></div>
</div>
</div>
</div>
</div> <!-- end row -->
<footer id="row" style="z-index:2;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 footerdiv">
<p>2017 © INET Restaurant. All Rights Reserved.</p>
</div>
<!-- end row -->
</footer>
<!--modal form -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Log in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span>×</span>
</button>
</div>
<!--<div class="modal-body mx-3">-->
<div class="modal-body form-horizontal">
<form class="form-horizontal">
<!-- form -->
<div class="form-group">
<label for="First-Name" class="control-label col-xs-3">
<i class="fa fa-user prefix grey-text"></i> First Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="First-Name">
</div>
</div>
<div class="form-group">
<label for="Last-Name" class="control-label col-xs-3">
<i class="fa fa-user prefix grey-text"></i> Last Name</label>
<div class="col-xs-8">
<input type="text" class="form-control" id="Last-Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" data-error="wrong" data-success="right" for="E-mail">
<i class="fa fa-envelope prefix grey-text"></i> Your E-mail</label>
<div class="col-xs-8">
<input type="email" id="E-mail" class="form-control validate">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" data-error="wrong" data-success="right" for="orangeForm-pass">
<i class="fa fa-lock prefix grey-text"></i> Your Password</label>
<div class="col-xs-8">
<input type="password" id="orangeForm-pass" class="form-control validate">
</div>
</div>
</form>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Log in</button>
</div>
</div>
</div>
</div>
the css :
.warning {
color:red;
}
.ok {
color:green;
}
.inputstatus {
position: static;
background:#ffeecc;
padding-top:7px;
width:100%;
}
.feedback {
float: right;
right: 4px;
}
.star {
float: left;
left: 6px;
color: green;
}
.error {
position: relative;
left: 12px;
}
.texttel1{
color:purple;
}
/*
.button2 {
background-color:pink;
}
.button2:hover {
background-color:darkred;
}
.button2:focus {
background-color:darkred;
}
.button2 {
background-color:pink;
}*/
/* button menu lightblue*/
.button21 {
background-color:lightblue;
}
.button21 > li > a {
background-color:lightblue;
}
.button21 > li > a:hover {
background-color:gray;
color:white;
}
.buttonsocial.active.focus,
.btn-default.active.focus,
.buttonsocial.active:focus,
.btn-default.active:focus,
.buttonsocial.active:hover,
.btn-default.active:hover,
.buttonsocial:active.focus,
.btn-default:active.focus,
.buttonsocial:active:focus,
.btn-default:active:focus,
.buttonsocial:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.buttonsocial.focus,
.open > .btn-default.active:focus,
.open > .dropdown-toggle.buttonsocial:focus,
.open > .btn-default.active:focus,
.open > .dropdown-toggle.buttonsocial:hover,
.open > .btn-default.active:hover{
background-color:cyan;
}
/* button menu end*/
/* button menu */
.button31 {
background-color:lightgreen;
}
.button31 > li > a {
background-color:lightgreen;
}
.button31 > li > a:hover {
background-color:green;
color:yellow;
}
.button3.active.focus,
.btn-default.active.focus,
.button3.active:focus,
.btn-default.active:focus,
.button3.active:hover,
.btn-default.active:hover,
.button3:active.focus,
.btn-default:active.focus,
.button3:active:focus,
.btn-default:active:focus,
.button3.active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.button3.focus , .btn-default.active:focus,
.open > .dropdown-toggle.button3:focus , .btn-default.active:focus,
.open > .dropdown-toggle.button3:hover , .btn-default.active:hover{
background-color:pink;
}
/* button menu end*/
/* The container */
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-top: 16px;
margin-bottom: 16px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox background-color: #eee;*/
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: pink;
border: solid 1px red;
}
/* On mouse-over, add a grey background color background-color: #ccc;*/
.container:hover input ~ .checkmark {
background-color: lightblue;
border: solid 1px blue;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: green;
border: solid 1px red;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 15px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* checkboxes */
/* The container */
.container2 {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container2 input.in1 {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark2 {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: pink;
}
/* On mouse-over, add a grey background color */
.container2:hover input.in1 ~ .checkmark2 {
background-color: lightgreen;
}
/* When the checkbox is checked, add a blue background */
.container2 input.in1:checked ~ .checkmark2 {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark2:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container2 input.in1:checked ~ .checkmark2:after {
display: block;
}
/* Style the checkmark/indicator */
.container2 .checkmark2:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.center1{
text-align:center;
}
the js 1
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>-->
<script>
$(document).ready(function(){
$(".icon").click(function(){
$(".bar1").toggleClass("blue");
$(".bar1").toggleClass("rotate45dg");
$(".bar2").toggleClass("opacity");
$(".bar3").toggleClass("rotate-45dg");
});
});
</script>
<script>
$(document).ready(function(){
// form
// first name glyph
$(".fst-name-glyph").on("mouseenter", function(){
$(".fst-name-glyph").css("background-color", "darkred");
$(".fst-name-glyph").css("color", "orange");
});
$(".fst-name-glyph").on("mouseleave", function(){
$(".fst-name-glyph").css("background-color", "darkgreen");
$(".fst-name-glyph").css("color", "yellow");
});
$(".fst-name-glyph").on("mouseenter", function(){
$(".fst-name-field").css("background-color", "pink");
});
$(".fst-name-glyph").on("mouseleave", function(){
$(".fst-name-field").css("background-color", "lightgreen");
});
// first name field
$(".fst-name-field").on("mouseenter", function(){
$(".fst-name-glyph").css("background-color", "darkred");
$(".fst-name-glyph").css("color", "orange");
});
$(".fst-name-field").on("mouseleave", function(){
$(".fst-name-glyph").css("background-color", "darkgreen");
$(".fst-name-glyph").css("color", "yellow");
});
$(".fst-name-field").on("mouseenter", function(){
$(".fst-name-field").css("background-color", "pink");
});
$(".fst-name-field").on("mouseleave", function(){
$(".fst-name-field").css("background-color", "lightgreen");
});
// last name glyph
$(".lst-name-glyph").on("mouseenter", function(){
$(".lst-name-glyph").css("background-color", "darkred");
$(".lst-name-glyph").css("color", "orange");
});
$(".lst-name-glyph").on("mouseleave", function(){
$(".lst-name-glyph").css("background-color", "darkgreen");
$(".lst-name-glyph").css("color", "yellow");
});
$(".lst-name-glyph").on("mouseenter", function(){
$(".lst-name-field").css("background-color", "pink");
});
$(".lst-name-glyph").on("mouseleave", function(){
$(".lst-name-field").css("background-color", "lightgreen");
});
// last name field
$(".lst-name-field").on("mouseenter", function(){
$(".lst-name-glyph").css("background-color", "darkred");
$(".lst-name-glyph").css("color", "orange");
});
$(".lst-name-field").on("mouseleave", function(){
$(".lst-name-glyph").css("background-color", "darkgreen");
$(".lst-name-glyph").css("color", "yellow");
});
$(".lst-name-field").on("mouseenter", function(){
$(".lst-name-field").css("background-color", "pink");
});
$(".lst-name-field").on("mouseleave", function(){
$(".lst-name-field").css("background-color", "lightgreen");
});
// email glyph
$(".email-glyph").on("mouseenter", function(){
$(".email-glyph").css("background-color", "darkred");
$(".email-glyph").css("color", "orange");
});
$(".email-glyph").on("mouseleave", function(){
$(".email-glyph").css("background-color", "darkgreen");
$(".email-glyph").css("color", "yellow");
});
$(".email-glyph").on("mouseenter", function(){
$(".email-field").css("background-color", "pink");
});
$(".email-glyph").on("mouseleave", function(){
$(".email-field").css("background-color", "lightgreen");
});
// email field
$(".email-field").on("mouseenter", function(){
$(".email-glyph").css("background-color", "darkred");
$(".email-glyph").css("color", "orange");
});
$(".email-field").on("mouseleave", function(){
$(".email-glyph").css("background-color", "darkgreen");
$(".email-glyph").css("color", "yellow");
});
$(".email-field").on("mouseenter", function(){
$(".email-field").css("background-color", "pink");
});
$(".email-field").on("mouseleave", function(){
$(".email-field").css("background-color", "lightgreen");
});
// phone glyph
$(".phone-glyph").on("mouseenter", function(){
$(".phone-glyph").css("background-color", "darkred");
$(".phone-glyph").css("color", "orange");
});
$(".phone-glyph").on("mouseleave", function(){
$(".phone-glyph").css("background-color", "darkgreen");
$(".phone-glyph").css("color", "yellow");
});
$(".phone-glyph").on("mouseenter", function(){
$(".phone-field").css("background-color", "pink");
});
$(".phone-glyph").on("mouseleave", function(){
$(".phone-field").css("background-color", "lightgreen");
});
// phone field
$(".phone-field").on("mouseenter", function(){
$(".phone-glyph").css("background-color", "darkred");
$(".phone-glyph").css("color", "orange");
});
$(".phone-field").on("mouseleave", function(){
$(".phone-glyph").css("background-color", "darkgreen");
$(".phone-glyph").css("color", "yellow");
});
$(".phone-field").on("mouseenter", function(){
$(".phone-field").css("background-color", "pink");
});
$(".phone-field").on("mouseleave", function(){
$(".phone-field").css("background-color", "lightgreen");
});
// .phone2 glyph
$(".phone2-glyph").on("mouseenter", function(){
$(".phone2-glyph").css("background-color", "darkred");
$(".phone2-glyph").css("color", "orange");
});
$(".phone2-glyph").on("mouseleave", function(){
$(".phone2-glyph").css("background-color", "darkgreen");
$(".phone2-glyph").css("color", "yellow");
});
$(".phone2-glyph").on("mouseenter", function(){
$(".phone2-field").css("background-color", "pink");
});
$(".phone2-glyph").on("mouseleave", function(){
$(".phone2-field").css("background-color", "lightgreen");
});
// .phone2 field
$(".phone2-field").on("mouseenter", function(){
$(".phone2-glyph").css("background-color", "darkred");
$(".phone2-glyph").css("color", "orange");
});
$(".phone2-field").on("mouseleave", function(){
$(".phone2-glyph").css("background-color", "darkgreen");
$(".phone2-glyph").css("color", "yellow");
});
$(".phone2-field").on("mouseenter", function(){
$(".phone2-field").css("background-color", "pink");
});
$(".phone2-field").on("mouseleave", function(){
$(".phone2-field").css("background-color", "lightgreen");
});
// .address glyph
$(".address-glyph").on("mouseenter", function(){
$(".address-glyph").css("background-color", "darkred");
$(".address-glyph").css("color", "orange");
});
$(".address-glyph").on("mouseleave", function(){
$(".address-glyph").css("background-color", "darkgreen");
$(".address-glyph").css("color", "yellow");
});
$(".address-glyph").on("mouseenter", function(){
$(".address-field").css("background-color", "pink");
});
$(".address-glyph").on("mouseleave", function(){
$(".address-field").css("background-color", "lightgreen");
});
// .address field
$(".address-field").on("mouseenter", function(){
$(".address-glyph").css("background-color", "darkred");
$(".address-glyph").css("color", "orange");
});
$(".address-field").on("mouseleave", function(){
$(".address-glyph").css("background-color", "darkgreen");
$(".address-glyph").css("color", "yellow");
});
$(".address-field").on("mouseenter", function(){
$(".address-field").css("background-color", "pink");
});
$(".address-field").on("mouseleave", function(){
$(".address-field").css("background-color", "lightgreen");
});
// .zip glyph
$(".zip-glyph").on("mouseenter", function(){
$(".zip-glyph").css("background-color", "darkred");
$(".zip-glyph").css("color", "orange");
});
$(".zip-glyph").on("mouseleave", function(){
$(".zip-glyph").css("background-color", "darkgreen");
$(".zip-glyph").css("color", "yellow");
});
$(".zip-glyph").on("mouseenter", function(){
$(".zip-field").css("background-color", "pink");
});
$(".zip-glyph").on("mouseleave", function(){
$(".zip-field").css("background-color", "lightgreen");
});
// .zip field
$(".zip-field").on("mouseenter", function(){
$(".zip-glyph").css("background-color", "darkred");
$(".zip-glyph").css("color", "orange");
});
$(".zip-field").on("mouseleave", function(){
$(".zip-glyph").css("background-color", "darkgreen");
$(".zip-glyph").css("color", "yellow");
});
$(".zip-field").on("mouseenter", function(){
$(".zip-field").css("background-color", "pink");
});
$(".zip-field").on("mouseleave", function(){
$(".zip-field").css("background-color", "lightgreen");
});
// .city glyph
$(".city-glyph").on("mouseenter", function(){
$(".city-glyph").css("background-color", "darkred");
$(".city-glyph").css("color", "orange");
});
$(".city-glyph").on("mouseleave", function(){
$(".city-glyph").css("background-color", "darkgreen");
$(".city-glyph").css("color", "yellow");
});
$(".city-glyph").on("mouseenter", function(){
$(".city-field").css("background-color", "pink");
});
$(".city-glyph").on("mouseleave", function(){
$(".city-field").css("background-color", "lightgreen");
});
// .city field
$(".city-field").on("mouseenter", function(){
$(".city-glyph").css("background-color", "darkred");
$(".city-glyph").css("color", "orange");
});
$(".city-field").on("mouseleave", function(){
$(".city-glyph").css("background-color", "darkgreen");
$(".city-glyph").css("color", "yellow");
});
$(".city-field").on("mouseenter", function(){
$(".city-field").css("background-color", "pink");
});
$(".city-field").on("mouseleave", function(){
$(".city-field").css("background-color", "lightgreen");
});
// .pwd glyph
$(".pwd-glyph").on("mouseenter", function(){
$(".pwd-glyph").css("background-color", "darkred");
$(".pwd-glyph").css("color", "orange");
});
$(".pwd-glyph").on("mouseleave", function(){
$(".pwd-glyph").css("background-color", "darkgreen");
$(".pwd-glyph").css("color", "yellow");
});
$(".pwd-glyph").on("mouseenter", function(){
$(".pwd-field").css("background-color", "pink");
});
$(".pwd-glyph").on("mouseleave", function(){
$(".pwd-field").css("background-color", "lightgreen");
});
// .pwd field
$(".pwd-field").on("mouseenter", function(){
$(".pwd-glyph").css("background-color", "darkred");
$(".pwd-glyph").css("color", "orange");
});
$(".pwd-field").on("mouseleave", function(){
$(".pwd-glyph").css("background-color", "darkgreen");
$(".pwd-glyph").css("color", "yellow");
});
$(".pwd-field").on("mouseenter", function(){
$(".pwd-field").css("background-color", "pink");
});
$(".pwd-field").on("mouseleave", function(){
$(".pwd-field").css("background-color", "lightgreen");
});
// .re glyph
$(".re-glyph").on("mouseenter", function(){
$(".re-glyph").css("background-color", "darkred");
$(".re-glyph").css("color", "orange");
});
$(".re-glyph").on("mouseleave", function(){
$(".re-glyph").css("background-color", "darkgreen");
$(".re-glyph").css("color", "yellow");
});
$(".re-glyph").on("mouseenter", function(){
$(".re-field").css("background-color", "pink");
});
$(".re-glyph").on("mouseleave", function(){
$(".re-field").css("background-color", "lightgreen");
});
// .re field
$(".re-field").on("mouseenter", function(){
$(".re-glyph").css("background-color", "darkred");
$(".re-glyph").css("color", "orange");
});
$(".re-field").on("mouseleave", function(){
$(".re-glyph").css("background-color", "darkgreen");
$(".re-glyph").css("color", "yellow");
});
$(".re-field").on("mouseenter", function(){
$(".re-field").css("background-color", "pink");
});
$(".re-field").on("mouseleave", function(){
$(".re-field").css("background-color", "lightgreen");
});
// form end
});
</script>
js2 part
<script>
$(document).ready(function(){
$("li").click(function(){
var city = $(this).text();
//alert(cities);
$("#your-city").val(city.trim());
});
});
</script><!--
<script>
function myFunction() {
document.getElementById("myOrder").reset();
}
</script>-->
<!--
>-->
<script>
$('.input-group').on('focusin focusout input', function () {
console.log('cnanged');
var name = $(this).find(".check").attr("name");
var value = $(this).find(".check").val().trim();
var fakeReg = /(.)\1{2,}/;
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
var $form = $("form.register");
var inputs = $form[0].elements;
if ( value === "") {
$(this).next().find(".error").html("Your "+name+" field is Empty !").removeClass("ok").addClass("warning");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
// $(this).find(".starrq").removeClass("ok").addClass("warning");
} else {
//$(this).next().find(".error").html("Your "+name+" field is OK !").removeClass("warning").addClass("ok");
//$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
/* first name */
if (name === "First Name") {
if (value.length > 19) {
// condition for more than 19 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter no more than 19 char ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
if (/^([a-zA-Z]{2,16})+$/.test(value) === true) {
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
} else {
if (/^([a-zA-Z]{1,16})+$/.test(value) === true) {
// condition for less than 2 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter 2 upper case or lower case at least ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
// condition for non a to z
$(this).next().find(".error").html(name + " is Incorrect: Please enter upper case and lower case only ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
//if (value.length > 16) {
// $(this).next().find(".error").html(name + " is Incorrect: Please enter no more then 16 char ");
// }
}
}
}
}
/* last name */
if (name === "Last Name") {
if (value.length > 19) {
// condition for more than 19 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter no more than 19 char ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
if (/^([a-zA-Z]{2,16})+$/.test(value) === true) {
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
} else {
if (/^([a-zA-Z]{1,16})+$/.test(value) === true) {
// condition for less than 2 char
$(this).next().find(".error").html(name + " is Incorrect: Please enter 2 upper case or lower case at least ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
// condition for non a to z
$(this).next().find(".error").html(name + " is Incorrect: Please enter upper case and lower case only ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
//if (value.length > 16) {
// $(this).next().find(".error").html(name + " is Incorrect: Please enter no more then 16 char ");
}
}
}
}
/* */
}
/* Phone number */
var inputstr = value;
if (name === "Phone Number") {
if (inputstr.length > 0) {
//var inputstr = $(this).val();
var phoneReg =/\(?([0-9]{4})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/;
if(!phoneReg.test(inputstr) ) {
// email
$(this).next().find(".error").html(name + " is Incorrect: Please enter Phone Number correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name + " is Ok : Your Phone number has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
//$(this).css("border","2px solid green");
}
} else{
$(this).next().find(".error").html(name+" is EMPTY: Please enter data into this input");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
/* email */
//var emailName = (email) => E-mail.split("@")[0];
//console.log("name at E-mai:", name);
//alert(inputattr+inputstr);
var emailName = (email) => E-mail.split("@")[0];
if (value != "") {
$(this).next().find(".error").html(name+' is ok').removeClass("warning").addClass("ok");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
/* E-mail*/
if (name === "E-mail") {
if(emailReg.test(value)) {
$(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
} else {
$(this).next().find(".error").html(name + " is Incorrect: Please enter it correctly ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).find(".error");
//$(this).css("border","2px solid red");
if (emailName === "First Name") {
$(this).next().find(".error").html(name + " is Incorrect: E-mail should not match first namr ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
} else {
if (emailName === "Last Name") {
$(this).next().find(".error").html(name + " is Incorrect: E-mai should not match last namr ").removeClass('ok').addClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
}
}
}
}
}
} else {
$(this).next().find(".error").html(name+' is empty ').removeClass("ok").addClass("warning");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
}
/* address */
if (name === "Postal Address") {
if (value.length > 0) {
//var value = $(this).val();
// var AddressReg = /^[#.0-9a-zA-Z\s,-]+$/ ;
var AddressReg = /^\d+\s[A-z]+\s[A-z]+/g;
if(!AddressReg.test(value) ) {
// address
$(this).next().find(".error").html(name + " is Incorrect: Please enter Address correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
}
}
}
/* postcode */
if (name === "zip code") {
if (value.length > 0) {
//var inputstr = $(this).val();
//var PostcodeReg = /^[A-Z]{1,2}[0-9][0-9A-Z]?\s?[0-9][A-Z]{2}+$/g;
var PostcodeReg = /^[a-zA-Z]{1,2}([0-9]{1,2}|[0-9][a-zA-Z])\s*[0-9][a-zA-Z]{2}$/;
if(!PostcodeReg.test(value) ) {
//post-code
$(this).next().find(".error").html(name + " is Incorrect: Please enter Post-code correctly ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name + " is Ok : Your data has been entered correctly ");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
}
}
}
/* city */
if (name === "Your City") {
if ( value === "") {
$(this).next().find(".error").html("Your "+name+" field is Empty !").removeClass("ok").addClass("warning");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
// $(this).find(".starrq").removeClass("ok").addClass("warning");
} else {
$(this).next().find(".error").html("Your "+name+" field is OK !").removeClass("warning").addClass("ok");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
}
}
/* } */
if (name === "Password") {
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
if (value.length > 0) {
/*
var inputstr = $(this).val();
var pswstr = $(this).val();
var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
*/
// fake text
//var inputstr = $(this).val();
//var fakeReg = /(.)\1{2,}/;
if(fakeReg.test(value)) {
$(this).next().find(".error").html(name + " is Fake text: Please remove repetition ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
//check if password and last-name is the same
if (value === inputs["Last Name"].value) {
$(this).next().find(".error").html(name + " is Incorrect: Password shouldn't match last-name ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
//check if password and first-name is the same
if (value === inputs["First Name"].value) {
$(this).next().find(".error").html(name + " is Incorrect: Password shouldn't match fist-name ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
if (!pswReglow.test(value)) {
$(this).next().find(".error").html(name + " is Incorrect: Please enter at lest 6 character ");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
$(this).next().find(".error").addClass('warning').removeClass('ok');
//$(this).css("border","2px solid red");
} else {
if (!pswRegheigh.test(value)) {
// condition to check if length is bigger than 12 char
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly");
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
} else {
$(this).next().find(".error").html(name + " is Incorrect: Please enter no more than 12 character "+inputstr);
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
//$(this).next(".fielderror").html(inputattr+" is OK: Your data has been entered correctly "+inputstr);
//$(this).next(".fielderror").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');
//$(this).css("border","2px solid red");
}
}
/* retype password */
if (name === "Retype Password") {
if (value.length > 0) {
if (inputstr !== inputs.Password.value) {
$(this).next().find(".error").html(name + " is Incorrect: Password doesn't match retyped pwd ");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
} else {
$(this).next().find(".error").html(name+" is OK: Your data has been entered correctly "+inputstr);
$(this).next().find(".error").addClass('ok').removeClass('warning');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-remove").addClass("glyphicon glyphicon-ok").removeClass("warning").addClass("ok");
//$(this).css("border","2px solid green");
}
// var pswReglow = /^([a-zA-Z0-9]{6,})+$/;
// var pswRegheigh = /^([a-zA-Z0-9]{13,})+$/;//13 or more occurences
}else{
$(this).next().find(".error").html(name+" is EMPTY: Please enter data into this input");
$(this).next().find(".error").addClass('warning').removeClass('ok');
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).css("border","2px solid red");
}
}
//alert(name);
});
$(".btn1").click(function(){
$(".input-group").each(function(){
var name = $(this).find(".check,textarea").attr("name");
var value = $(this).find(".check").val().trim();
if ( value === "") {
$(this).next().find(".error").html(name + " is empty !").removeClass("ok").addClass("warning");
$(this).next().find(".feedback").removeClass("glyphicon glyphicon-ok").addClass("glyphicon glyphicon-remove").removeClass("ok").addClass("warning");
//$(this).find(".starrq").removeClass("ok").addClass("warning");
}
//alert(name);
});
});
</script>
I needed to descompose in parts, first the html part, then css , then js1 and2. jds1 is for hovering, js 2 for validation. I need to work on css, hovering part, and validation. email validation is not working fully. if I type first and last name is not comparing yet. phone number I am not sure. password looks working. city looks working but I am not sure if it right. first name last name looks ok. buttons with dropdown needs to be changed too, I need to ad the login/pwd reset modal too. please have a look.
unfortunately I could not come , I needed to sort out my phone here in hungary, I came back from uk, my mothers healt became worse, sorry. please understand my situation, thank you, frank.
I have put the code you posted into a codepen which you can find here.
The only change to the html was that I moved the closing container of .fluid-container to the end of the mark up as it was incorrectly nested and giving you a horizontal scrollbar.
</div><!-- this closing div moved to the end of the html -->
<div class="row" style="z-index:2;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fluid bottompadding">
In bootstrap .row must be a direct child of its container (.container or .fluid-container). There is also no point in adding an line style with a z-index rule applied as z-index only applies to positioned elements and you should be doing it in the stylesheet anyway.
If you now click ‘fork’ at the bottom then that codepen will become yours.
Note I think you have omitted some of the CSS as the nav is no longer fixed positioned.
You also did not provide the bootstrap or font-awesome css files but I have added those from the CDN. I assumed you were still working with the old bootstrap3 so I added the latest of that version3 and the latest font-awesome.
It is your inability to follow basic instructions that delay your progress. There is no excuse not to list all the files you were using. It’s a simple request and needs little explanation or expertise. All it needs is to pay attention to what you are doing. (I sound like a school teacher now )
If there are missing CSS files then they need to be added to the codepen in the order they appear in your original document.
You can now see from the codepen that there is no dark-green on hover because the JS has taken care of the highlighting.
What other CSS issues are you having?
I am not prepared to look at any JS issues as @Paul_Wilkins has been through those already with you and covered in detail in your other threads.
2 Likes
thank you for help
I could not ad the myStyles-1c.css. still I am not sure if the city input field is correct, email is not checking if first name or last name is same as name from email.
layout switch is in the myStyles-1c.css file so missing it it is a major problem.registration
registration in codepen css section has the myStyles-1c.css file content just it is apearing in a wrong way.
I forgot to mention about the fluid container : I planed to be between main menu and footer, both being controled by @media {} conform window width, keeping relevant elelments gathered and controlled. .