I'm trying to design a web site with bootstrap and I downloaded code for registration page
There are 3 files:
HTML,
CSS
and .js
registration.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code </title>
<link href="css/my.css" rel="stylesheet">
<script src="js/b.js"></script>
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Sign Up for Free</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
First Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Last Name<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Set A Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Get Started</button>
</form>
</div>
<div id="login">
<h1>Welcome Back!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot">Forgot Password?</p>
<button class="button button-block"/>Log In</button>
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
</body>
my.css
#import "compass/css3";
$body-bg: #c1bdba;
$form-bg: #13232f;
$white: #ffffff;
$main: #1ab188;
$main-light: lighten($main,5%);
$main-dark: darken($main,5%);
$gray-light: #a0b3b0;
$gray: #ddd;
$thin: 300;
$normal: 400;
$bold: 600;
$br: 4px;
*, *:before, *:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background:$body-bg;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration:none;
color:$main;
transition:.5s ease;
&:hover {
color:$main-dark;
}
}
.form {
background:rgba($form-bg,.9);
padding: 40px;
max-width:600px;
margin:40px auto;
border-radius:$br;
box-shadow:0 4px 10px 4px rgba($form-bg,.3);
}
.tab-group {
list-style:none;
padding:0;
margin:0 0 40px 0;
&:after {
content: "";
display: table;
clear: both;
}
li a {
display:block;
text-decoration:none;
padding:15px;
background:rgba($gray-light,.25);
color:$gray-light;
font-size:20px;
float:left;
width:50%;
text-align:center;
cursor:pointer;
transition:.5s ease;
&:hover {
background:$main-dark;
color:$white;
}
}
.active a {
background:$main;
color:$white;
}
}
.tab-content > div:last-child {
display:none;
}
h1 {
text-align:center;
color:$white;
font-weight:$thin;
margin:0 0 40px;
}
label {
position:absolute;
transform:translateY(6px);
left:13px;
color:rgba($white,.5);
transition:all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
font-size:22px;
.req {
margin:2px;
color:$main;
}
}
label.active {
transform:translateY(50px);
left:2px;
font-size:14px;
.req {
opacity:0;
}
}
label.highlight {
color:$white;
}
input, textarea {
font-size:22px;
display:block;
width:100%;
height:100%;
padding:5px 10px;
background:none;
background-image:none;
border:1px solid $gray-light;
color:$white;
border-radius:0;
transition:border-color .25s ease, box-shadow .25s ease;
&:focus {
outline:0;
border-color:$main;
}
}
textarea {
border:2px solid $gray-light;
resize: vertical;
}
.field-wrap {
position:relative;
margin-bottom:40px;
}
.top-row {
&:after {
content: "";
display: table;
clear: both;
}
> div {
float:left;
width:48%;
margin-right:4%;
&:last-child {
margin:0;
}
}
}
.button {
border:0;
outline:none;
border-radius:0;
padding:15px 0;
font-size:2rem;
font-weight:$bold;
text-transform:uppercase;
letter-spacing:.1em;
background:$main;
color:$white;
transition:all.5s ease;
-webkit-appearance: none;
&:hover, &:focus {
background:$main-dark;
}
}
.button-block {
display:block;
width:100%;
}
.forgot {
margin-top:-20px;
text-align:right;
}
b.js
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
I downloaded it and put the html file in the website folder
& the css and js files in the css and js folders respectively.
Then I tried to call these external files:
<link href="css/my.css" rel="stylesheet">
<script src="js/b.js"></script>
but failed.
I think the css rule is the reason or the the code for using external ".js" files & css files
The code that you have in my.css is not CSS - it's SCSS, which needs to be compiled into CSS. You can read more about SASS/SCSS here:
http://sass-lang.com/guide
Related
I am trying to make the border of a textbox red when a text that does not containthe "#" is typed in (it is an email checker). Unfortunately, this does not happen.
I have tried to use a class that contains the new border color but unfortunately, it seems that this change is never applied.
This is the html and js code:
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up Page
</title>
<link rel="stylesheet" href="style.css" media="screen"/>
</head>
<body>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
}
else if (!(x.includes("#")))
{
alert("you must have to filled value with #");
document.getElementById("nameT").style.color="red";
document.getElementById("fname").className = 'error';
return false;
}
}
</script>
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()"
method="post">
<p id="nameT"> email </p>
<input type="text" name="fname" placeholder="enter
email" onblur="validateForm()">
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password">
<br>
<input type="submit" value="Submit">
<br>
<a href="#">
Lost your password?
</a>
<br>
<a href="#">
Create an account
</a>
</form>
</div>
</body>
</html>
This is the css code:
html, body { height: 100%; }
body {
background:radial-gradient(ellipse at center, rgba(255,254,234,1)
0%, rgba(255,254,234,1) 35%, #ffffff 100%);
overflow: hidden;
}
.ocean {
height: 5%;
width:100%;
position:absolute;
bottom:0;
left:0;
background: #ffffff;
}
.wave {
background: url(https://s3-us-west-
2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
position: absolute;
top: -198px;
width: 6400px;
height: 198px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53)
infinite;
transform: translate3d(0, 0, 0);
}
.wave:nth-of-type(2) {
top: -175px;
animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s
infinite, swell 7s ease -1.25s infinite;
opacity: 1;
}
#keyframes wave {
0% {
margin-left: 0;
}
100% {
margin-left: -1600px;
}
}
#keyframes swell {
0%, 100% {
transform: translate3d(0,-25px,0);
}
50% {
transform: translate3d(0,5px,0);
}
}
.loginbox
{
width: 340px;
height: 360px;
background: #000;
color: #fff;
top: 50%;
left:50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
}
h2
{
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;
}
.loginbox input[type="text"], input[type="password"]
{
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 48px;
background: #fb2525;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
cursor: pointer;
background: #ffc107;
color: #000;
}
.loginbox a
{
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.loginbox p
{
margin: 0;
padding: 10px;
font-weight: bold;
}
.loginbox a:hover
{
color: #ffc107;
}
.error{
border:2px solid red;
}
The expected output is the border becoming red if the "#" symbol is not typed into the email textbox. The actual result is no such effect and instead, a "cannot set property 'className' of null" error.
You are using the document.getElementById("fname") but you do not have any id which has name "fname" so update input as,
<input type="text" id="fname" name="fname" placeholder="enter
email" onblur="validateForm()">
Change the getElementById to,
document.getElementById("fname").classList.add('error');
and change your .error class to,
.error{
border-bottom:2px solid red !important;
}
Try it by accessing elements via document.forms as below
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
} else if (!(x.includes("#"))) {
alert("you must have to filled value with #");
document.forms.myForm.name.style.color = "red";
document.forms.myForm.name.style.border = "1px solid red";
document.forms.myForm.fname.className = 'error';
return false;
} else {
document.forms.myForm.name.style.color = "#000";
document.forms.myForm.name.style.border = "1px solid #000";
}
}
<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
</div>
<h1>
<center>
Whale
</center>
</h1>
<div class="loginbox">
<h2>
Login
</h2>
<form name="myForm" onsubmit="return validateForm()" method="post">
<p id="nameT"> email </p>
<input type="text" name="fname" placeholder="enter
email" onblur="validateForm()">
<p name="passT"> password </p>
<input type="text" name="name" placeholder="enter
password">
<br>
<input type="submit" value="Submit">
<br>
<a href="#">
Lost your password?
</a>
<br>
<a href="#">
Create an account
</a>
</form>
</div>
just add id=fname in your text field and replace your js with my js
<input type="text" id="fname" name="fname" placeholder="enter email"
onblur="validateForm()">
Here is js
function validateForm() {
document.getElementById("nameT").style.color = "white";
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("something must be filled out");
return false;
} else if (!(x.includes("#"))) {
alert("you must have to filled value with #");
document.getElementById("nameT").style.color = "red";
document.getElementById("fname").className = 'error';
return false;
}
}
here is demo on jsbin
I am trying to reverse the direction of the arrow in my checkbox by using two classes with help of ng-class.
Its not working as expected.
Here is my code:
PS : angularJS CDN is already integrated.
test.php
<div class="container">
<div class="row">
<div class="col-md-12" >
<div class="check-element animate-show-hide" ng-show="checked" style="display:inline-block;width:100%;overflow-y:auto;" >
<ul class="timeline timeline-horizontal" >
<li class="timeline-item" ng-repeat="s in steps">
<div class="timeline-badge" ng-class="{'navion':s.status === 1, 'timeline-badge-green':s.status === 0}"></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">{{s.status === 1 ? "In progress" : (s.status === 0)? (s.date | date:"MMM d, y") : "Pending"}}</h4>
</div>
<div class="timeline-body">
<p>{{s.description}}</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<br>
<div id="ck-button">
<label>
<input type="checkbox" value="1" ng-model="checked" aria-label="Toggle ngShow"><i ng-class="{onlineClass}"></i>
</label>
</div>
style.css
label i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 8px;
}
.up {
-webkit-transform: rotate(-135deg);
margin-left: 27%;
margin-top: 38%;
}
.down {
-webkit-transform: rotate(45deg);
margin-left: 27%;
margin-top: 18%;
}
div label input {
margin-right:100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button:hover {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid red;
overflow:auto;
float:left;
color:red;
}
#ck-button label {
float:left;
width:4.0em;
height: 40px;
width: 40px;
}
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
}
#ck-button label input {
position:absolute;
top:-20px;
}
#ck-button input:checked + span {
background-color:#911;
color:#fff;
}
j_TestCtrl.js
$scope.onlineClass = function(a) {
return (a > 0) ? 'up' : 'down';
};
since onlineClass is a function you can use :
<div id="ck-button">
<label>
<input type="checkbox" value="1" ng-model="checked" aria-label="Toggle ngShow">
<i ng-class="onlineClass(checked)"></i>
>/label>
</div>
Try adding () after the function name in order to actually call the it in your ng-class code and also add a parameter as your function's definition is function(a).
Something like this:
<div id="ck-button">
<label>
<input type="checkbox" value="1" ng-model="checked" aria-label="Toggle ngShow">
<i ng-class="{onlineClass(checked)}"></i>
>/label>
</div>
P.S. Why would you want to tinker with a web standard element that everyone understands?
How to Validate? Don’t allow Gmail, Yahoo, etc email addresses. And one more issue is that when all the fields are not entered submit should be disabled. when i fill all submit is enabled and when i remove one input after filling it, submit should be disabled, but still it's enabled. How to fix that?
$("#passwordv").on("focusout", function (e) {
if ($(this).val() != $("#passwordvConfirm").val()) {
$("#passwordvConfirm").removeClass("valid").addClass("invalid");
$('#btn-1').show();
} else {
$("#passwordvConfirm").removeClass("invalid").addClass("valid");
$('#btn').removeAttr("disabled");
$('#btn-1').hide();
}
});
$("#passwordvConfirm").on("keyup", function (e) {
if ($("#passwordv").val() != $(this).val()) {
$(this).removeClass("valid").addClass("invalid");
$('#btn-1').show();
} else {
$(this).removeClass("invalid").addClass("valid");
$('#btn').removeAttr("disabled");
$('#btn-1').hide();
}
});
$(document).ready(function () {
$('#passwordv').keyup(function () {
$('#result').html(checkStrength($('#passwordv').val()))
})
function checkStrength(password) {
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
if (password.length > 7) strength += 1
// If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) strength += 1
// If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) strength += 1
// If it has one special character, increase strength value.
if (password.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
// If it has two special characters, increase strength value.
if (password.match(/(.*[!,%,&,#,#,$,^,*,?,_,~].*[!,%,&,#,#,$,^,*,?,_,~])/)) strength += 1
// Calculated strength value, we can return messages
// If value is less than 2
if (strength < 2) {
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
} else if (strength == 2) {
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
} else {
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if ($this.val() === '') {
label.removeClass('highlight');
} else if ($this.val() !== '') {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #f1f0ee;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #1ab188;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 130px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
#media only screen and (max-width: 768px) {
.form {
background: rgba(19, 35, 47, 0.9);
padding: 40px;
max-width: 600px;
margin: 30px auto;
border-radius: 4px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
}
.tab-group {
list-style: none;
padding: 0;
margin: 0 0 40px 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
padding: 15px;
background: rgba(160, 179, 176, 0.25);
color: #a0b3b0;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
}
.tab-group li a:hover {
background: #179b77;
color: #ffffff;
}
.tab-group .active a {
background: #1ab188;
color: #ffffff;
}
.tab-content>div:last-child {
display: none;
}
h1 {
text-align: center;
color: #ffffff !important;
font-weight: 300;
margin: 0 0 40px !important;
}
label {
position: absolute;
-webkit-transform: translateY(6px);
transform: translateY(6px);
left: 13px;
color: rgba(255, 255, 255, 0.5);
transition: all 0.25s ease;
-webkit-backface-visibility: hidden;
pointer-events: none;
margin-top: 18px;
}
label .req {
margin: 2px;
color: #1ab188;
}
label.active {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
left: 2px;
font-size: 14px;
}
label.active .req {
opacity: 0;
}
label.highlight {
color: #ffffff;
}
input,
textarea {
font-size: 22px;
display: block;
width: 100%;
height: 100%;
padding: 8px 10px;
background: none;
background-image: none;
border: 1px solid #a0b3b0;
color: #ffffff;
border-radius: 0;
transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus,
textarea:focus {
outline: 0;
border-color: #1ab188;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
margin-bottom: 25px;
}
.top-row:after {
content: "";
display: table;
clear: both;
}
.top-row>div {
float: left;
width: 48%;
margin-right: 4%;
}
.top-row>div:last-child {
margin: 0;
}
.button {
border: 0;
outline: none;
border-radius: 50px;
padding: 15px 0;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .1em;
background: #1ab188;
color: #ffffff;
transition: all 0.5s ease;
-webkit-appearance: none;
}
.button:hover,
.button:focus {
background: #179b77;
}
.button-block {
display: block;
width: 50%;
margin: 0 auto;
}
.forgot {
text-align: right;
}
#toast-container {
top: 4% !important;
right: 40% !important;
left: 40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="form">
<ul class="tab-group">
<li class="tab active">Log In</li>
<li class="tab">Sign Up</li>
</ul>
<div class="tab-content">
<div id="login">
<form id="form_id" method="post" name="myform">
<div class="field-wrap">
<label>
User Name<span class="req">*</span>
</label>
<input type="text" autocomplete="off" name="username" id="username" required>
</div>
<div class="field-wrap">
<label>
Password<span class="req">*</span>
</label>
<input type="password" autocomplete="off" name="password" id="password" required>
</div>
<p class="forgot">Forgot Password?</p>
<input type="button" value="Log in" id="submit" onclick="validate()" class="button button-block">
</form>
</div>
<div id="signup">
<form>
<div class="field-wrap">
<label>
Name<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Company Details<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label for="passwordv">
Set A Password<span class="req">*</span>
</label>
<input id="passwordv" type="password" class="validate" required autocomplete="off" />
<span id="result" style="color: white;"></span>
</div>
<div class="field-wrap" style="margin-bottom: 0px">
<label id="lblPasswordvConfirm" for="passwordvConfirm" data-error="Password not match"
data-success="Password Match">
Confirm Password<span class="req">*</span>
</label>
<input id="passwordvConfirm" type="password" required autocomplete="off" />
</div>
<label class="field-wrap" id="btn-1" style="display: none;color: white;font-size: 15px">password
didn't match
</label>
<input type="submit" value="submit" id="btn" class="button button-block" style="margin-top:20px;cursor:not-allowed"
disabled />
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
Okay, so I broke down your code a bit to make it more easily understood. This example will only include your signup part of your application.
As I explained in my comment, what you could do to test the E-mails to see whether they are a Gmail or a Yahoo E-mail, is by using regular expressions (RegExp).
Example of Gmail RegExp:
/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g
Example of Yahoo RegExp:
/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i
In my example, I'll put them into functions for simplicity.
Gmail RegExp function:
function regExpGmail() {
return RegExp(/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g);
}
Yahoo RegExp function:
function regExpYahoo() {
return RegExp(/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i);
}
Now, I altered some of your code a bit in order to have some selectors to go by. Some of your input fields did not contain any selectors, such as name or id, while others did. So I took the liberty to add some.
One thing to note, is that the id you assigned your password input field (not the password confirm one, but the one before that) had some id conflicts. Therefore I took the liberty to change the id accordingly.
I then made a function handling all the validation logic of the input fields to fit your needs in your question. However, again, pretty simplified. I would suggest you alter it to fit your solution a little bit better, but it should give you more than a general idea.
Full Example:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function regExpGmail() {
return RegExp(/([a-zA-Z0-9]+)([\.{1}])?([a-zA-Z0-9]+)\#gmail([\.])com/g);
}
function regExpYahoo() {
return RegExp(/^[^#]+#(yahoo|ymail|rocketmail)\.(com|in|co\.uk)$/i);
}
function validateInputs() {
reGmail=regExpGmail();
reYahoo=regExpYahoo();
var result = true;
var nameCheck=$('#nameField').val();
var emailCheck=$('#emailField').val();
var compDetailsCheck=$('#compDetailsField').val();
var passwordCheck=$('#passwordvz').val();
var passwordConfirmCheck=$('#passwordvConfirm').val();
if(!nameCheck) {
result=false;
$('#nameError').html('Name is missing!');
}
else {
$('#nameError').html('');
}
if(!emailCheck) {
result=false;
$('#emailError').html('E-mail is missing!');
}
else if(reGmail.test(emailCheck)) {
result=false;
$('#emailError').html('Gmail is not allowed!');
}
else if(reYahoo.test(emailCheck)) {
result=false;
$('#emailError').html('Yahoo is not allowed!');
}
else {
$('#emailError').html('');
}
if(!compDetailsCheck) {
result=false;
$('#compDetailsError').html('Company Details is missing!');
}
else {
$('#compDetailsError').html('');
}
if(!passwordCheck) {
result=false;
$('#passwordError').html('Password is missing!');
}
else {
$('#passwordError').html('');
}
if(passwordCheck != passwordConfirmCheck) {
result=false;
$('#passwordError2').html('The passwords do not match!');
}
else {
$('#passwordError2').html('');
}
if(result == true) {
$('#btn').removeAttr('disabled');
$('#btn').css("cursor", "");
alert('Everything ok, you may now press the submit button!');
}
}
</script>
<div class="form">
<div class="tab-content">
<div id="signup">
<form>
<div class="field-wrap">
<span id="nameError" style="color: red !important;"></span><br />
<label>
Name<span class="req">*</span>
</label>
<input type="text" id="nameField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="emailError" style="color: red !important;"></span><br />
<label>
Email Address<span class="req">*</span>
</label>
<input type="email" id="emailField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="compDetailsError" style="color: red !important;"></span><br />
<label>
Company Details<span class="req">*</span>
</label>
<input type="text" id="compDetailsField" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap">
<span id="passwordError" style="color: red !important;"></span><br />
<label for="passwordv">
Set A Password<span class="req">*</span>
</label>
<input id="passwordvz" type="password" class="validate" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<div class="field-wrap" style="margin-bottom: 0px">
<span id="passwordError2" style="color: red !important;"></span><br />
<label id="lblPasswordvConfirm" for="passwordvConfirm" data-error="Password not match"
data-success="Password Match">
Confirm Password<span class="req">*</span>
</label>
<input id="passwordvConfirm" type="password" required autocomplete="off" onkeyup="validateInputs();" /><br />
</div>
<input type="submit" value="submit" id="btn" class="button button-block" style="margin-top:20px;cursor:not-allowed" disabled />
</form>
</div>
</div><!-- tab-content -->
</div> <!-- /form -->
Screenshots of the validation process:
I am trying to create a login form. Here is the example..
.log {
margin-top: 40px;
margin-left: 30px;
margin-right: 30px;
position: relative;
}
.log input[type="text"] {
font-size:13px;
padding:10px 10px 10px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
background-color: #fff;
}
.log input[type="password"] {
font-size:13px;
padding: 5px 10px 5px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #757575;
background-color: #fff;
}
.inputlog:focus { outline:none;}
.log label {
color:#999;
font-size:14px;
font-weight:normal;
position:absolute;
pointer-events:none;
left: 5px;
top: 5px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input.inputlog:focus ~ label, input.used ~ label {
top: -20px;
color: #4a89dc;
}
.bar {
position:relative;
display:block;
width:100%;
}
.bar:before, .bar:after {
content:'';
height:2px;
width: 0;
bottom:1px;
position:absolute;
background: #1ba4df;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
.inputlog:focus ~ .bar:before, .inputlog:focus ~ .bar:after {
width:50%;
}
<div class="form-desc">
<div class="lock-icon">
<img src="assets/img/icon/padlock.png">
</div>
<div class="login-msg">
<h4>Great to have you back!</h4>
</div>
<form >
<div class="log">
<input class="inputlog" type="text">
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input class="inputlog" type="password">
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="forgot-pswd">
Forgot Password?
</div>
<div class="login-algn">
<div class="login-btn">
<h4>LOGIN</h4>
</div>
</div>
<div class="new-login">
<p>New here? Click here to Register</p>
</div>
</div>
Here now if click on the fields, the border bottom color is change to Blue.
Suppose if the fields are empty and if I am click on the login button, How to change of the border bottom color Blue to Red? Means it should show these are required field like that.
I need only the border color change to Red.
Thank you.
Try this code.
Plunker LINK
HTML
<div class="log">
<input id="user" class="inputlog" type="text" required="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input id="pwd" class="inputlog" type="password" required="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
JS
$( document ).ready(function() {
$(".login-btn").click(function(){
var user = $("#user").val();
var pwd = $("#pwd").val();
if(!user){
$("#user").addClass("makeRed");
}
else
{
$("#user").removeClass("makeRed");
}
if(!pwd){
$("#pwd").addClass("makeRed");
}
else
{
$("#pwd").removeClass("makeRed");
}
});
$("#user").click(function(){
$("#user").removeClass("makeRed");
});
$("#pwd").click(function(){
$("#pwd").removeClass("makeRed");
});
});
CSS
.makeRed{
border-bottom: 1px solid red !important;
}
using this jQuery
$('form').find('input').each(function(){
if($(this).prop('required')){
$(this).parent().find('.bar')addClass('red-bar');
} else {
$(this).parent().find('.bar')removeClass('red-bar');
}
});
and CSS
.bar.red-bar:before, .bar.red-bar:after {
background: red;
}
Hope, this will help to get idea to solve your problem, HTML with edited login button
<div class="form-desc">
<div class="lock-icon">
<img src="">
</div>
<div class="login-msg">
<h4>Great to have you back!</h4>
</div>
<form >
<div class="log">
<input class="inputlog" type="text" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Email Address</label>
</div>
<div class="log">
<input class="inputlog" type="password" required>
<span class="highlight"></span>
<span class="bar"></span>
<label>Password</label>
</div>
<div class="forgot-pswd">
Forgot Password?
</div>
<div class="login-algn">
<div>
<input class="login-btn" type="submit" value="login">
</div>
</div>
<div class="new-login">
<p>New here? Click here to Register</p>
</div>
JQuery
$(".login-btn").on("click",function(){
var text = $("input[type='text']");
var pass = $("input[type='password']");
if(!text.val()){
text.css("border","2px solid red");
}
if(!pass.val()){
pass.css("border","2px solid red");
}
});
This work for me
var Error_Flag = false;
$('.Signin_Form').find('input').each(function(){
if($(this).attr('required')){
if($(this).val() == ''){
$(this).css({'border': '1px solid #FFB74D'});
Error_Flag = true;
}
else
{
$(this).css({'border':''});
}
}
});
$('.Signin_Form input').on('keyup',function(event) {
if($(this).val() != ''){
$(this).css({'border':''});
}
});
if(Error_Flag){
return;
}
I have been making some changes to my website except suddenly (this is a new problem) I am unable to click the buttons or anything on the website except for the header part (the grey part at the top of the screen.) This happens quite frequently to other pages of my site and typically after looking at it for a while I figure it out but this time I just cannot get it. The code for this page will be shown below. Any help will be appreciated. Just a little note, I believe it is in the header because I was editing the search. The code is shown below.
<!DOCTYPE html
<html>
<head>
<title>Your Pages</title>
<meta name="viewport" content="initial-scale=1.0">
<style>
div.wrapper{
margin:auto;
text-align:center;
width:100%;
transition:background 2s ease-in-out;
}
div.pages{
text-align:center;
background-color:#FFFFE8;
margin:auto;
width:95%;
padding:5px;
}
button{
margin:5px;
width:95%;
padding:4px;
background-color:skyblue;
border:2px solid skyblue;
}
a.opt{
margin:5px;
}
input[type="text"], input[type="submit"], textarea{
width:50%;
border-radius:10px;
border:1px solid lightblue;
height:30px;
padding:2px;
margin:4px;
text-align:center;
background-color:white;
}
div.newp{
position:relative;
z-index:0;
width:75%;
margin:auto;
padding:10px;
border-radius:10px;
box-shadow:10px 5px 5px black;
background-color:white;
display:none;
}
</style>
</head>
<body>
<style>
span.posts{
font-family:sans-serif;
font-weight:bold;
font-size:28px;
float:left;
}
div.wrapper{
position:absolute;
top:30%;
width:100%;
font-family:sans-serif;
z-index:-1;
}
h3.num{
font-family:sans-serif;
font-weight:normal;
font-size:28px;
}
div.main{
position:fixed;
border:1px solid black;
box-shadow:10px 10px 10px #000000;
background-color:rgba(000, 000, 000, 0.7);
width:100%;
padding:5px;
}
body{
padding:0px;
margin:0px;
}
a.hea{
text-decoration:none;
color:white;
float:left;
font-size:28px;
}
a.mlinks{
float:none;
}
a.menu{
margin:28px;
color:white;
}
div.mmenu{
display:none;
position:absolute;
z-index:0;
transition:all 2s ease-in-out;
}
input[type="text"].se{
margin-top:7%;
visibility:hidden;
width:0%;
transition:all 2s ease-in-out;
float:left;
}
#media (max-width:480px){
a.menu{
display:none;
}
a.menbs{
float:left;
}
div.mmenu{
display:block;
position:absolute;
left:-100%;
width:100%;
top:30%;
height:70%;
text-align:center;
background-color:black;
color:white;
transition:left 2s ease-in-out;
}
}
#media (min-width:481px){
a.menb{
display:none;
}
}
a.menb{
float:right;
margin-right:8px;
}
a.menbs{
float:right;
margin-right:8px;
}
img.menuimage{
width:3em;
height:3em;
}
div.searchField{
width: 100%;
background-color:black;
display:none;
opacity:0;
position:absolute;
top:0%;
left:0%;
color:white;
text-align:center;
padding-top:10%;
transition:all 1s ease-in-out;
}
input[type="text"].headerSearch{
background-color:transparent;
border:2px solid white;
color:white;
text-align:center;
width:75%;
font-size:28px;
padding:4px;
}
</style>
<div class="main" id="main">
<h3 class="num"><span class="posts">Posts</span>101</h3>
<a class="menu hea" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a>
<a class="menu hea" href="http://www.wilsonfamily5.org/posts101/accounts" target="frame">My Account</a>
<input type="text" onclick="submitForm()" placeholder="search" class="se" id="se">
<a class="menb hea" onclick="mmenu()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/menu.png" alt="menu"></a>
<a class="menbs hea" onclick="search()"><img class="menuimage" src="http://www.wilsonfamily5.org/posts101/search.png" alt="search" onclick="search()"></a>
</div>
<div class="mmenu" id="mmenu">
<a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/pages" target="frame">Pages</a><br>
<a class="hea mlinks" href="http://www.wilsonfamily5.org/posts101/account" target="frame">My Account</a>
</div>
<div class="searchField" id="searchField" style="height: 100%;">
<form action="results.php" method="GET">
<h1>search anything, then click enter</h1>
<input type="text" name="q" placeholder="search" class="headerSearch"><br><br>
<a onclick="cancelSearch()" style="color:white;">cancel search</a>
</form>
</div>
<script>
var mmop = false;
function mmenu(){
if(mmop == false){
document.getElementById("mmenu").style.display="block";
document.getElementById("mmenu").style.left="0%";
mmop = true;
}else{
document.getElementById("mmenu").style.left="-100%";
mmop = false;
setTimeout(function(){
document.getElementById("mmenu").style.display="none";
}, 2000);
}
}
var sea = false;
function search(){
document.getElementById("searchField").style.display="block";
document.getElementById("searchField").style.opacity="0.7";
}
function cancelSearch(){
document.getElementById("searchField").style.display="none";
}
function submitForm(){
var se = document.getElementById("se").value;
window.location="http://www.wilsonfamily5.org/posts101/results.php?q=" + se;
}
</script>
<div id="wrapper" class="wrapper">
<h1>Your Pages</h1>
<p>Click on "Create page" to create a page. Click on a page, and then select whether you want to open it, edit it, or unsubscribe.</p>
<p style="color:green;"></p>
<p style="color:red;"></p>
<button id="cbutton" onclick="newf()">Create page</button>
<div id="newp" class="newp">
<form id="newpageform" name="newp" action="newPage.php" method="POST">
<h1>New Page</h1>
<input type="text" name="title" placeholder="Title"><br>
<textarea form="newpageform" name="description" placeholder="Description"></textarea><br>
<textarea form="newpageform" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
<input type="text" onkeyup="ajaxRefresh()" style="display:none; margin:auto;" name="rCode" id="rcode" placeholder="rewards code">
<p id="info"></p>
<input type="submit" value="Create Page"><br>
<a onclick="redeemCode()">Redeem rewards code</a>
</form>
<button onclick="closeNewPage()">Close</button>
</div>
<div id="newep" class="newp">
<form id="editpageform" name="newp" action="editPage.php" method="POST">
<h1>Edit Page</h1>
<input type="text" id="title" name="title" placeholder="Title"><br>
<textarea form="editpageform" id="description" name="description" placeholder="Description"></textarea><br>
<textarea form="editpageform" id="keywords" name="keywords" placeholder="Keywords (separated by space)"></textarea><br>
<input type="hidden" name="ident" id="ident">
<input type="submit" value="Edit Page">
</form>
<button onclick="closeEditPage()">Close</button>
</div>
<div id="pages" class="pages">
Helicopter<a class='opt' href='page.php?p=45'>Open</a><a class='opt' onclick='edit(45)'>Edit</a><a class='opt' onclick='unsubscribe(45)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=43'>Open</a><a class='opt' onclick='unsubscribe(43)'>Unsubscribe</a><br>Test page<a class='opt' href='page.php?p=42'>Open</a><a class='opt' onclick='unsubscribe(42)'>Unsubscribe</a><br> <p>To get new pages on this list, create or search for a page!</p>
</div>
</div>
<script>
function newf(){
document.getElementById("wrapper").style.background="black";
document.getElementById("newp").style.display="block";
document.getElementById("cbutton").style.display="none";
document.getElementById("pages").style.display="none";
}
function unsubscribe(id){
window.location="../substatus/unsubscribe.php?i=" + id + "&t=1";
}
function edit(id){
document.getElementById("wrapper").style.background="black";
document.getElementById("newep").style.display="block";
document.getElementById("cbutton").style.display="none";
document.getElementById("pages").style.display="none";
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
var text = xhttp.responseText;
var parts = text.split("?(105|SpLiTtEr)!");
document.getElementById("title").value = parts[0];
document.getElementById("description").value = parts[1];
document.getElementById("keywords").value = parts[2];
document.getElementById("ident").value = id;
}
xhttp.open("GET", "http://www.wilsonfamily5.org/posts101/pageInfo.php?i=" + id, true);
xhttp.send();
}
function closeEditPage(){
document.getElementById("wrapper").style.background="white";
document.getElementById("newep").style.display="none";
document.getElementById("cbutton").style.display="block";
document.getElementById("pages").style.display="block";
}
function closeNewPage(){
document.getElementById("wrapper").style.background="white";
document.getElementById("newp").style.display="none";
document.getElementById("cbutton").style.display="block";
document.getElementById("pages").style.display="block";
}
function redeemCode(){
document.getElementById("rcode").style.display="block";
}
function ajaxRefresh(){
var input = document.getElementById("rcode").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange=function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
if(xhttp.responseText == ""){
document.getElementById("rcode").style.border="2px solid red";
document.getElementById("info").innerHTML = xhttp.responseText;
}else{
document.getElementById("rcode").style.border="2px solid green";
document.getElementById("info").innerHTML = xhttp.responseText + " points are available on this card.";
}
}
}
xhttp.open("GET", "../rewards/ajaxCheck.php?c=" + input, true);
xhttp.send();
}
</script>
</body>
</html>
Short answer:
Your links and such aren't clickable because they have a negative z-index, and are falling underneath the body. Line 91:
div.wrapper {
z-index: -1;
}