We Keep Coding

How to dynamically position info box based on the position of the different element with same class?

How can I position my info box based on the position of the element? currently there is multiple element using the same class. This causes the info box to take the position of another element with same class instead. This is what I have done so far.
credit of the password strength meter to: http://elationbase.com/jquery/jquery-password-requirements/index.html#demos
login.html
class in question: .pr-password
<div class="login-wrap" id="cust-signup-wrap">
<h2 class="title-3">Agent New Sign-Up </h2>
<form role="cust-signup" class="signup" id="" action="{% url 'signup' %}" method="post">
<div class="form-group"><input type="text" placeholder="Email address" name="email" class="form-control" style="height: 35px;"></div>
<div class="form-group has-feedback has-feedback-left">
<input type="password" placeholder="Password" name="password" class="pr-password form-control pass" style="height: 35px;">
</div>
</div>
<div class="login-wrap" id="merchant-signup-wrap">
<h2 class="title-3">Merchant New Sign-Up </h2>
<form role="cust-signup" class="signup" id="" action="{% url 'signup' %}" method="post">
<div class="form-group"><input type="text" placeholder="Email address" name="email" class="form-control" style="height: 35px;"></div>
<div class="form-group has-feedback has-feedback-left">
<input type="password" placeholder="Password" name="password" class="pr-password form-control pass" style="height: 35px;">
</div>
</div>
JavaScript
// Show Message reusable function
var showMessage = function () {
if (numCharactersDone === false || useLowercaseDone === false || useUppercaseDone === false || useNumbersDone === false || useSpecialDone === false) {
$(".pr-password").each(function(index, value) {
console.log(index, value)
// Find the position of element
var posH = $(this).offset().top,
itemH = $(this).innerHeight(),
totalH = posH+itemH,
itemL = $(this).offset().left;
// Append info box tho the body
$("body") .append(messageDiv);
$("#pr-box") .addClass(o.style)
.fadeIn(o.fadeTime)
.css({top:totalH, left:itemL});
});
}
};
css
/*for password strength meter*/
#pr-box {
font: 13px/16px sans-serif;
position: absolute;
z-index:1500;
/*top: 468.171875px;*/
/*left: 61px;*/
display: none;
width:300px;
max-width:100%;
}
#pr-box i {
width: 0;
height: 0;
margin-left: 20px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #23a86d;
}
#pr-box-inner {
margin-top: 6px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 10px rgba(0,0,0,0.2);
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
#pr-box p {
padding:20px;
-webkit-border-radius: 2px 2px 0 0;
-moz-border-radius: 2px 2px 0 0;
border-radius: 2px 2px 0 0;
}
#pr-box ul {
padding:7px;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
}
#pr-box ul li {
list-style: none;
padding:7px;
}
#pr-box ul li span {
width:15px;
height:15px;
display:block;
float:left;
border-radius:100%;
margin-right:15px;
}
#pr-box.light {
color:#2d2f31;
}
#pr-box.light p {
background-color:#23a86d;
color:#f1f1f1;
}
#pr-box.light ul {
background-color:#f1f1f1;
}
#pr-box.light ul li span {
background-color:#f1f1f1;
border:3px solid #23a86d;
}
#pr-box.light ul li span.pr-ok {
background-color:#23a86d;
border:3px solid #23a86d;
}
#pr-box.dark {
color:#f1f1f1;
}
#pr-box.dark p {
background-color:#23a86d;
}
#pr-box.dark ul {
background-color:#2d2f31;
}
#pr-box.dark ul li span {
background-color:#2d2f31;
border:3px solid #23a86d;
}
#pr-box.dark ul li span.pr-ok {
background-color:#23a86d;
border:3px solid #23a86d;
}

Alright, I have managed to solve this issue. Hopefully it would somehow help future stackoverflow-er in their design thinking.
I have included a if condition to check on the styling of my html as it has pop-up. You could look into this direction if you needed to apply on multiply style. If you do not have pop up, you could assign unique ID and find the id corresponding to it.
JavaScript
var showMessage = function() {
if (numCharactersDone === false || useLowercaseDone === false || useUppercaseDone === false || useNumbersDone === false || useSpecialDone === false) {
$(".pr-password").each(function(index, value) {
if ($(this).is(":visible")) { //added this line in
// Find the position of element
var posH = $(this).offset().top,
itemH = $(this).innerHeight(),
totalH = posH + itemH,
itemL = $(this).offset().left;
// Append info box tho the body
$("body").append(messageDiv);
$("#pr-box").addClass(o.style)
.fadeIn(o.fadeTime)
.css({
top: totalH,
left: itemL
});
}
});
}
};

How to handle keyword boxes with spans in JavaScript / HTML / CSS

I am trying to build a variable number of keyword boxes (the number of keyword boxes is handeld by php).
For better understanding I made three hardcoded html keyword boxes.
The final result should be multiple keyword boxes which can handle multiple keywords and show them after every ENTER in a seperated inner box. If I click on the BUTTON, all keywords should be alerted.
My current try is nearly working. You are able to type in keywords, store them by pressing enter.
But the inner keyword boxes are only shown, after klicking on the keyword box again.
I would be verry grateful if anybody could help me with this problem. :)
let tags = [];
let tagContainer = document.querySelectorAll('.tag-container');
tagContainer.forEach(function(foo) {
foo.addEventListener('click', (e) => {
//console.log(e.target.tagName);
//if (e.target.tagName === 'I') {
var tagLabel = e.target.getAttribute('data-item');
var index = tags.indexOf(tagLabel);
tags = [...tags.slice(0, index), ...tags.slice(index + 1)];
foo.querySelectorAll('.tag').forEach(tag => {
tag.parentElement.removeChild(tag);
});
tags.slice().reverse().forEach(tag => {
var div = document.createElement('div');
div.setAttribute('class', 'tag');
var span = document.createElement('span');
span.innerHTML = tag;
var closeIcon = document.createElement('i');
closeIcon.innerHTML = 'close';
closeIcon.setAttribute('class', 'material-icons');
closeIcon.setAttribute('data-item', tag);
div.appendChild(span);
div.appendChild(closeIcon);
foo.prepend(div);
});
//}
})
});
let input = document.querySelectorAll('.tag-container input');
input.forEach(function(bar) {
bar.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
e.target.value.split(',').forEach(tag => {
tags.push(tag);
});
bar.querySelectorAll('.tag').forEach(tag => {
tag.parentElement.removeChild(tag);
});
tags.slice().reverse().forEach(tag => {
var div = document.createElement('div');
div.setAttribute('class', 'tag');
var span = document.createElement('span');
span.innerHTML = tag;
var closeIcon = document.createElement('i');
closeIcon.innerHTML = 'close';
closeIcon.setAttribute('class', 'material-icons');
closeIcon.setAttribute('data-item', tag);
div.appendChild(span);
div.appendChild(closeIcon);
bar.prepend(div);
});
bar.value = '';
}
bar.focus();
})
});
function clicked() {
alert(JSON.stringify(tags));
}
.container {
width: 20%;
margin: 40px;
align-self: center;
}
.tag-container {
border: 2px solid #ccc;
padding: 10px;
border-radius: 5px;
display: flex;
}
.tag-container .tag {
padding: 5px;
border: 1px solid #ccc;
display: flex;
align-items: center;
margin: 5px;
border-radius: 3px;
background: #f2f2f2;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
cursor: default;
}
.tag i {
font-size: 16px;
margin-left: 5px;
}
.tag-container input {
flex: 1;
font-size: 16px;
padding: 5px;
outline: none;
border: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<table>
<td>
<div class="tag-container">
<div id="span_tag">
<span id="span_key" value=""></span>
<i class="material-icons">close</i>
</div>
<input id="input_search" value="" />
</div>
</tr>
</td>
<td><button type="button" id="bt" onclick="clicked()">Button</button>
<td/>
</table>
<table>
<td>
<div class="tag-container">
<div id="span_tag">
<span id="span_key" value=""></span>
<i class="material-icons">close</i>
</div>
<input id="input_search" value="" />
</div>
</tr>
</td>
<td><button type="button" id="bt" onclick="clicked()">Button</button>
<td/>
</table>
<table>
<td>
<div class="tag-container">
<div id="span_tag">
<span id="span_key" value=""></span>
<i class="material-icons">close</i>
</div>
<input id="input_search" value="" />
</div>
</tr>
</td>
<td><button type="button" id="bt" onclick="clicked()">Button</button>
<td/>
</table>
re

const tagContainerNodes = document.querySelectorAll(".tag-container");
tagContainerNodes.forEach((tagContainerNode) => {
const input = tagContainerNode.querySelector("input");
input.addEventListener("keyup", e => {
if (e.key === "Enter") {
createTag(e.target.value, tagContainerNode, input);
e.target.value = "";
}
});
});
function createTag(tagName, parent, before) {
var div = document.createElement("div");
div.setAttribute("class", "tag");
var span = document.createElement("span");
span.innerHTML = tagName;
div.appendChild(span);
parent.insertBefore(div, before)
}
function clicked() {
const allTagText = [];
tagContainerNodes.forEach((tagContainerNode) => {
const tagNodes = tagContainerNode.querySelectorAll(".tag");
tagNodes.forEach((tagNode) => {
allTagText.push(tagNode.textContent);
});
});
console.log(allTagText);
}
.tag-container {
border: 2px solid #ccc;
padding: 10px;
border-radius: 5px;
display: flex;
}
.tag-container .tag {
padding: 5px;
border: 1px solid #ccc;
margin: 5px;
border-radius: 3px;
background: #f2f2f2;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 1px 1px #fff;
}
.tag-container input {
font-size: 16px;
padding: 5px;
outline: none;
border: 0;
}
<div class="tag-container">
<input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>
<div class="tag-container">
<input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>
<div class="tag-container">
<input id="input_search" />
</div>
<button type="button" onclick="clicked()">Button</button>

How can I get my error messages to display only if username or password is not entered correctly using jquery?

document.getElementById("button1").addEventListener("click", mouseOver1);
function mouseOver1(){
document.getElementById("button1").style.color = "red";
}
document.getElementById("button2").addEventListener("click", mouseOver);
function mouseOver(){
document.getElementById("button2").style.color = "purple";
}
$("#button1").hover(function() {
$(this).css('cursor','pointer');
});
$("#button2").hover(function() {
$(this).css('cursor','pointer');
});
$(document).ready(function(){
$('#button1').on('click', function () {
if($(".existingUsername").get(0).value == "S0104675" && $(".existingPassword").get(0).value == "honor433")
{
$('#para1').animate({'left': '-100%'});
$('.username-label').animate({'left': '-105%'});
$('.existingUsername').animate({'left': '-105%'});
$('.password-label').animate({'left': '-105%'});
$('.existingPassword').animate({'left': '-105%'});
$('#button1').animate({'left': '-105%'});
}else{
document.getElementById("username_error1").innerHTML= "Please enter an existing valid username";
document.getElementById("password_error2").innerHTML= "Please enter an existing valid password";
}
});
});
.intro h1 {
font-family: 'Cambria';
font-size: 16pt;
font: bold;
text-align: left;
}
.intro p {
font-family: 'Calibri';
font: italic;
font-size: 12pt;
padding: 0px 690px 0px 20px;
text-align: left;
}
.content {
border: 2px solid;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#para1 {
padding: 0px 1050px 0px 20px;
}
#para2 {
padding: 0px 1099px 0px 20px;
}
.username-label,
.password-label {
margin: 10px 0px 0px 350px;
position: relative;
top: -70px;
}
.existingUsername,
.existingPassword,
#username_error1,
#password_error2
{
top: -70px;
position: relative;
}
#button1{
background-color: #add8e6;
margin-left: 425px;
position: relative;
top: -70px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
padding: 0px 20px 0px 20px;
}
#button2{
background-color: #add8e6;
margin-left: -200px;
position: relative;
top: -30px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 0px 20px 0px 20px;
}
.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4
{
margin: 0px 0px 0px 300px;
position: relative;
top: -70px;
}
.newUsername,
.newPassword,
.newEmail,
.repeatEmail{
position: relative;
top: -70px;
margin-left: 20px;
}
span{
color: red;
margin-left: 300px;
}
<html>
<head>
<link href="Home.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Project</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>Welcome to Cuyahoga Community College Student Services Online</h1>
<p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
</div>
<br/>
<div class="content">
<div class="row top">
<p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
<div class="login">
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password"/><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>
</div>
</div>
<hr/>
<div class="row bottom">
<p id="para2">New users, please create a new account by providing us with some basic information.</p>
<div class= "new_customers_info">
<label class="Username-label1" for="newUsername">Username</label>
<input class="newUsername" type="text" value="">
<br/><br/>
<label class="Password-label2" for="newPassword">Password</label>
<input class="newPassword" type="password" value="">
<br/><br/>
<label class="Email-label3" for="newEmail">Email Address</label>
<input class="newEmail" type="email" value="" >
<br/><br/>
<label class="Repeat-Email-label4" for="repeatEmail">Repeat Email Address</label>
<input class="repeatEmail" type="email" value="">
<button id="button2">Create Account</button>
</div>
</div>
</div>
<br/>
<footer>Cuyahoga Community College</footer>
<footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
</div>
<script src="Home.js"></script>
</body>
</html>
Hello Everyone,
I have created a webpage that allows me to enter username and password on my webpage (upper content), but the problem I am having is how can I get it to display the span error message only if the username is incorrect or if the password is incorrect? Right now, it will animate both textboxes off the screen even if password is not entered or not correct. And vice versa, when the username isn't correct or not entered. How can I fix this problem? Do I need to make my if statements more restricted? Here is my code.

You can populate your error on the fly as each field is read, and set a variable that keeps track of whether there are any errors. If there are no errors, run the code that does whatever you want when the form is submitted.
$("#button1").on("click", function() {
var error = 0,
usernameError = document.getElementById("username_error1"),
passwordError = document.getElementById("password_error2");
if ($(".existingUsername").get(0).value != "S0104675") {
usernameError.innerHTML = "Please enter an existing valid username";
error = 1;
} else {
usernameError.innerHTML = '';
}
if ($(".existingPassword").get(0).value != "honor433") {
passwordError.innerHTML = "Please enter an existing valid password";
error = 1;
} else {
passwordError.innerHTML = '';
}
if (error == 0) {
console.log('form is ok');
$("#para1").animate({ left: "-100%" });
$(".username-label").animate({ left: "-105%" });
$(".existingUsername").animate({ left: "-105%" });
$(".password-label").animate({ left: "-105%" });
$(".existingPassword").animate({ left: "-105%" });
$("#button1").animate({ left: "-105%" });
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="username-label" for="existingUsername">Username</label>
<input class="existingUsername" type="text" /><br><span id="username_error1"></span><br>
<label class="password-label" for="existingPassword">Password</label>
<input class="existingPassword" type="password" /><br><span id="password_error2"></span><br>
<button id="button1">Log in</button>

$("#button1").on("click", function() {
var error = 0;
usernameError = document.getElementById("username_error1");
passwordError = document.getElementById("password_error2");
if ($(".existingUsername").get(0).value != "S0104675") {
usernameError.innerHTML = "Please enter an existing valid username";
error = 1;
} else {
usernameError.innerHTML = '';
}
if ($(".existingPassword").get(0).value != "honor433") {
passwordError.innerHTML = "Please enter an existing valid password";
error = 1;
} else {
passwordError.innerHTML = '';
}
if (error == 0) {
console.log('form is ok');
$("#para1").animate({ left: "-100%" });
$(".username-label").animate({ left: "-105%" });
$(".existingUsername").animate({ left: "-105%" });
$(".password-label").animate({ left: "-105%" });
$(".existingPassword").animate({ left: "-105%" });
$("#button1").animate({ left: "-105%" });
}
});

Html/Javascript/Css how to check if inputs are empty [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have 6 different input-fields and I want to do so you have to fill in all of them, else a alert message will pop-up. Any tips on how to do this?
I also have problems with option for different font-styles. When you click on the different options for the font-style, the text that you wrote in the input-filed should change and also the text infront "förtag" and so on.
This is my code:
function SkrivUt() {
var el = document.getElementById('f');
el.style.color = document.getElementById('textColor').value;
el.style.fontStyle = document.getElementById('selectedFont').value;
el.style.backgroundColor = document.getElementById('backGroundColour').value;
$("#area1").html($("#foretagText").val());
$("#area2").html($("#efternamnText").val());
$("#area3").html($("#fornamnNamnText").val());
$("#area4").html($("#titleText").val());
$("#area5").html($("#telefonText").val());
$("#area6").html($("#epostText").val());
$("#visitkort").hide();
$("#visitkortsDemo").show();
}
function reset() {
document.getElementById('foretagText').value = "";
document.getElementById('efternamnText').value = "";
document.getElementById('fornamnNamnText').value = "";
document.getElementById('titleText').value = "";
document.getElementById('telefonText').value = "";
document.getElementById('epostText').value = "";
}
.form-style-3 {
max-width: 400px;
max-height 400px;
font-family: "Comic Sans MS", cursive, sans-serif;
}
.form-style-3 label {
display: block;
margin-bottom: 10px;
}
.form-style-3 label span {
float: left;
width: 150px;
font-weight: bold;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
}
.form-style-3 fieldset {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 0px 0px 10px 0px;
border: 1px solid #FFD2D2;
padding: 20px;
background: lightblue;
box-shadow: inset 0px 0px 15px #FFE5E5;
-moz-box-shadow: inset 0px 0px 15px #FFE5E5;
-webkit-box-shadow: inset 0px 0px 15px #FFE5E5;
}
/*Format legent inom ett fieldset*/
.form-style-3 fieldset legend {
color: #FFA0C9;
border-top: 1px solid #FFD2D2;
border-left: 1px solid #FFD2D2;
border-right: 1px solid #FFD2D2;
border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
background: #FFF4F4;
padding: 0px 8px 3px 8px;
box-shadow: -0px -1px 2px #F1F1F1;
-moz-box-shadow: -0px -1px 2px #F1F1F1;
-webkit-box-shadow: -0px -1px 2px #F1F1F1;
font-weight: normal;
font-size: 12px;
}
.select-field {
background: gray;
color: white;
border-radius: 5px 5px 5px 5px;
}
.input-field {
font-family: "Comic Sans MS", cursive, sans-serif;
color: red
}
<!DOCTYPE html>
<html>
<head>
<title>Visitkort</title>
<link rel='stylesheet' type='text/css' href='Style.css' />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="form-style-3">
<div id="visitkort" style='display:block'>
<fieldset>
<legend>Visitkort</legend>
<label><span>Företaget</span>
<input type="text" id="foretagText" />
</label>
<label><span>Efternamn </span>
<input type="text" id="efternamnText" />
</label>
<label><span>Förnamn </span>
<input type="text" id="fornamnNamnText" />
</label>
<label><span>Titel </span>
<input type="text" id="titleText" />
</label>
<label><span>Telefon </span>
<input type="text" id="telefonText" />
</label>
<label><span>Epost </span>
<input type="text" id="epostText" />
</label>
<label>
<span>Välj bakgrundsfärg</span>
<select class="select-field" id="backGroundColour">
<option value="RoyalBlue">Blå</option>
<option value="Yellow">gul</option>
<option value="Crimson">Röd</option>
</select>
</label>
<label>
<span>Välj Textfärg</span>
<select class="select-field" id="textColor">
<option value="RoyalBlue">Blå</option>
<option value="Yellow">Gul</option>
<option value="Crimson">röd</option>
</select>
</label>
<label>
<span>Välj typsnitt</span>
<select class="select-field" id="selectedFont">
<option value="Verdana">Verdana</option>
<option value="Ariel">Ariel</option>
<option value="Impact">Impact</option>
<option value="Tahoma">Tahoma</option>
</select>
</label>
<label><span><button type="button" onclick="reset()">Nollställ</button></span><span><button type="button" onclick="SkrivUt()">Skriv ut</button></span>
</label>
</fieldset>
</div>
<div id="visitkortsDemo" style='display:none'>
<fieldset id="f">
<legend>Förgranskning av visitkort</legend>
n>Företaget </span>
<p id="area1"></p>
</label>
<label><span>Efternamn </span>
<p id="area2"></p>
</label>
<label><span>Förnamn </span>
<p id="area3"></p>
</label>
<label><span>Titel </span>
<p id="area4"></p>
</label>
<label><span>Telefon </span>
<p id="area5"></p>
</label>
<label><span>Epost </span>
<p id="area6"></p>
</label>
</fieldset>
</div>
</div>
</body>
</html>

A simple and quick way would be to use HTML5's required attribute!
Example:
<input type="text" id="foretagText" required />
This will produce browser alerts, when an input field is empty. No need for difficult custom Javascript.

You haven't tried much, so im not just going to give answer, but here is an idea, in raw javascript. You will want a better way of collecting the input Ids obviously, thats up to you.
<script>
var inputs = ["inputid1", "inputid2", "inputid3"];
var notFilled = "";
for (var i in inputs){
element = document.getElementById(i);
if(element.value==""){
notFilled = i;
break;
}
}
if(notFilled!=""){
alert("you must fill" + notFilled);
}
</script>

// create your err array
var err = [];
//test if values are a blank string
if($("#foretagText").val() === ""){
//add the error message to your error array
err.push("Foretag not entered");
}
// be sure you only have if statements and they aren't nested like this
if($("#idOfNextValue").val() === ""){
//add the error message to your error array
err.push("Foretag not entered");
}
//alert all messages in your error array.
alert (err.length + " Errors:<br>" +err.join("<br>"));//join

In HTML5 you can use required attribute as follow;
<input type="text" required>
Or in jQuery:
Let's say HTML:
<input type="text" id="input-1">
<input type="text" id="input-2">
<input type="text" id="input-3">
<input type="text" id="input-4">
and so on..
Now jQuery
if($("[id^=input]").val()=="")
{
alert("error");
return;
}

HTML way : Use required attribute
<input type="text" id="somename" required>
Javascript way:
if ($('#foretagText').val() == '' || $('#efternamnText').val() != ' ...) {
alert("Fields empty");
}

For your first question. To require the user to select a value in a select you have to add the atributte required like this
<select class="select-field" id="backGroundColour" required>
<option value="RoyalBlue">Blå</option>
<option value="Yellow">gul</option>
<option value="Crimson">Röd</option>
</select></label>
For your second question I'm not completely sure about this but I think that the problem resides in that you are trying to change the label style directly without change the associated css.

Javascript Alert Box with Radio Button

I am a beginner in Javascript, and I have a question to ask- how do you make the submit button show an alert box when no radio button is selected? I've tried a lot of times but nothing seems to work- any help would be greatly appreciated. Thank you.
<html>
<head>
<title> Reviewer </title>
<style type="text/css">
body
{
background-image: url("reviewerbackground.jpg");
background-attachment: fixed;
font-family: verdana;
color:white;
text-shadow: black 0.1em 0.1em 0.2em;
line-height: 1.5;
font-size: 100%;
}
h1
{
color: white;
font-family: verdana;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
line-height: 1.5;
}
p
{
border: none;
width: 90%;
line-height: 1.5;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
background: tan;
padding: 3px;
text-align: left;
}
</style>
<script type="text/javascript">
function question1() {
var option = document.querySelector('input[name = "question1"]:checked').value;
if (option == 'd') {
alert("That's the correct answer!");
}
else {
alert ("Oops! try again!");
}
}
</script>
</head>
<body link="white" vlink="white">
<br>
<h1> Reviewer </h1> </br>
<center>
<p> 1. (Question- Answer will be D, the 4th radio button)
<br>
<br>
<input type="radio" name="question1" value="a"> choice a
<br>
<input type="radio" name="question1" value="b"> choice b
<br>
<input type="radio" name="question1" value="c"> choice c
<br>
<input type="radio" name="question1" value="d"> choice d
<br>
<br>
<input class="button" type="button" onclick="question1()" name="question1" value="Submit">
</p> </center>
<br>
</body>
</html>

try this:
function question1 () {
var option = getRVBN('question1');
//Check if no radio is selected
if(option==''){
alert("No radio button is selected");
return false;
}
if (option == 'd') {
alert("That's the correct answer!");
}
else {
alert ("Oops! try again!");
}
}
function getRVBN(rName) {
var radioButtons = document.getElementsByName(rName);
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) return radioButtons[i].value;
}
return '';
}
The function getRVBN() comes from this post Getting the selected radio without using "Id" but "name"
Here is fiddle:
http://jsfiddle.net/T9Lpr/18/

There is just a simple problem here, on the first line of your function, you have your querySelector mapped out correctly, but the :checked needs a space before it to work.
Like so:
var option = document.querySelector('input[name = "question1"] :checked').value;