Develop Reference

Form validation check for empty string using red border around that particular field

I created a function if one of the field of the form is empty it will show red border around that field and show some error text related to that field. But when there is only one field empty it shows the error perfectly but border comes along in all other fields too. So, this is problem I want the border only to come for that empty field only
[this is the link to my code, here in this link you can I have filled three fields and last field is
empty and I want the red border to come for only this field not other fields][1]
[1]: https://jsfiddle.net/gurkiran/kf5m6bsa/

You can check this solution. I've changed your border function.
const form = document.querySelector("form");
const input = document.querySelectorAll("input");
form.addEventListener("submit",e =>{
e.preventDefault();
border();
const firstName = form.firstName.value.trim();
const lastName = form.lastName.value.trim();
const email = form.email.value.trim();
const password = form.password.value.trim();
const nameReg = /[a-zA-Z]{3,}/;
const emailReg =/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/;
if (firstName === "" && lastName === "" && email === "" && password === ""){
first()
last()
mail()
pass()
} else if (lastName === "" && email === "" && password === ""){
last();
mail();
pass();
}else if ((email === "" || email === emailReg) && (password === "")){
mail();
pass();
}
else if (firstName === ""){
first()
} else if (lastName === ""){
last();
} else if (email === ""){
mail();
} else if (password === ""){
pass();
}else{
form.reset();
}
})
///First Name Text
const first = () =>{
form.firstName.placeholder = "";
}
// Last name Text
const last = () =>{
form.lastName.placeholder ="";
}
// Email
const mail = () =>{
form.email.placeholder = "email#example/com";
form.email.setAttribute("class","placeholder");
}
//Password Text
const pass = () =>{
form.password.placeholder ="";
}
/// Border for the input fields
const border = () =>{
input.forEach((field)=>{
let errorMsg = form.querySelector(`input[name="${field.name}"] ~ div.errorMessage`);
let errorImg = form.querySelector(`input[name="${field.name}"] ~ img[alt="error"]`);
if(field.value.trim().length <= 0) {
field.style.border ="2px solid hsl(0, 100%, 74%)";
errorMsg.style.display = 'block';
errorImg.style.display = 'initial';
} else {
field.style.border = '';
errorMsg.style.display = 'none';
errorImg.style.display = 'none';
}
}
)};
*,
*:focus,
*::before,
*::after {
margin: 0;
padding: 0;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image: url(../images/bg-intro-desktop.png);
background-color: #ff7a7a;
font-family: 'Poppins', sans-serif;
height: 100%;
width: 100%;
}
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 33% 40%;
grid-template-columns: 33% 40%;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.h2 {
color: white;
font-weight: bolder;
font-size: 3.2em;
}
.paragraph {
color: white;
font-size: 0.9em;
}
#firstH2 {
margin-bottom: -14px;
}
.box {
background-color: white;
border-radius: 10px;
text-align: center;
height: auto;
-webkit-box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
}
.firstButton {
font-family: 'Poppins', sans-serif;
width: 100%;
border: 0;
color: white;
background-color: #6055a5;
font-size: 1.1em;
padding: 16px;
border-radius: 10px;
-webkit-box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
font-weight: bolder;
}
.firstButton span {
font-size: 0.8em;
font-weight: normal;
}
input {
font-family: 'Poppins', sans-serif;
width: 90%;
padding: 15px;
font-size: 1em;
border: 1px solid #b9b6d3;
border-radius: 5px;
font-weight: 600;
color: #3e3c49;
}
input:focus {
font-family: 'Poppins', sans-serif;
font-size: 1em;
padding: 15px;
border: 1px solid black;
border-radius: 5px;
font-weight: 600;
color: #3e3c49;
}
input::-webkit-input-placeholder {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
input:-ms-input-placeholder {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
input::-ms-input-placeholder {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
input::placeholder {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.placeholder::-webkit-input-placeholder {
color: #ff7a7a;
}
.placeholder:-ms-input-placeholder {
color: #ff7a7a;
}
.placeholder::-ms-input-placeholder {
color: #ff7a7a;
}
.placeholder::placeholder {
color: #ff7a7a;
}
#greenButton {
width: 90%;
border: 0;
padding: 16px;
background-color: #38cc8c;
border-radius: 10px;
-webkit-box-shadow: 0px 5px #26b577;
box-shadow: 0px 5px #26b577;
}
#greenButton span {
font-family: 'Poppins', sans-serif;
color: white;
font-size: 1.3em;
font-weight: bold;
}
#greenButton:hover {
cursor: pointer;
background-color: #52fab1;
}
.terms {
color: #b9b6d3;
font-size: 12px;
margin-top: 2%;
text-align: center;
}
.terms span a {
text-decoration: none;
color: #ff7a7a;
font-weight: bold;
}
form {
position: relative;
}
#firstImg {
display: none;
position: absolute;
top: 13%;
right: 9%;
}
#secondImg {
display: none;
position: absolute;
top: 29%;
right: 9%;
}
#thirdImg {
display: none;
position: absolute;
top: 45%;
right: 9%;
}
#fourthImg {
display: none;
position: absolute;
bottom: 33.5%;
right: 9%;
}
.errorMessage {
font-size: 0.8em;
color: #ff7a7a;
text-align: right;
font-style: italic;
font-weight: 500;
margin-right: 30px;
margin-top: -25px;
margin-bottom: 18px;
}
#firstName {
display: none;
}
#secondName {
display: none;
}
#third {
display: none;
}
#fourth {
display: none;
}
.attribution {
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: #3e52a3;
}
#media only screen and (max-width: 700px) {
body {
background-image: url(../images/bg-intro-mobile.png);
}
.grid {
-ms-grid-columns: 90%;
grid-template-columns: 90%;
}
.h2, .paragraph {
text-align: center;
}
}
/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Intro component With Sign up Form</title>
</head>
<body>
<div class="container">
<div class="grid">
<!-- 1st grid -->
<div>
<br><br><br><br><br><br><br><br>
<h2 class="h2" id="firstH2">Learn to code by</h2>
<h2 class="h2">watching others</h2><br>
<p class="paragraph">See how experienced solve problems in real time. Watching scripted tutuorials is great, but
understanding how developers think is invaluable.</p>
</div>
<!-- 2nd grid -->
<div>
<div>
<br><br>
<button class="firstButton">Try it free 7 days <span>then $20/mo. thereafter</span></button>
<br><br>
<!-- box for white color -->
<div class="box">
<form>
<br><br>
<input type="text" name="firstName" placeholder="First Name"><br><br>
<img src="../images/icon-error.svg" id="firstImg" alt="error">
<div class="errorMessage" id="firstName">First Name cannot be empty</div>
<input type="text" name="lastName" placeholder="Last Name"><br><br>
<img src="../images/icon-error.svg" id="secondImg" alt="error">
<div class="errorMessage" id="secondName">Last Name cannot be empty</div>
<input type="email" name="email" placeholder="Email Address"><br><br>
<img src="../images/icon-error.svg" id="thirdImg" alt="error">
<div class="errorMessage" id="third">Looks like this is not an email</div>
<input type="password" name="password" placeholder="Password"><br><br>
<img src="../images/icon-error.svg" id="fourthImg" alt="error">
<div class="errorMessage" id="fourth">Password cannot be empty</div>
<button type="submit" id="greenButton"><span>CLAIM YOUR FREE TRIAL</span></button><br>
<div class="terms">
By clicking the button you are agreeing to our <span>Terms and Services</span>
</div><br><br>
</form>
</div>
</div>
</div>
</div>
</div>
<br><br>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Gurkiran Singh.
</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>

i am trying to use regex in my validation code but do not know where to put it?

i am trying to use regex in my validation code but do not know where to put it?
My regex validation is for first name, last name, email address and password.
I have put validation on first and last name but it's not working.
Also, can someone please suggest validation for password fields too? Thank You in advance.
Here's my code:
const form = document.querySelector("form");
const input = document.querySelectorAll("input");
form.addEventListener("submit",e =>{
e.preventDefault();
// console.log(e)
const firstName = form.firstName.value.trim();
const lastName = form.lastName.value.trim();
const email = form.email.value.trim();
const password = form.password.value.trim();
const nameReg = /^[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]+$/u;
const emailReg =/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/;
if (firstName === "" && lastName === "" && email === "" && password === ""){
first()
last()
mail()
pass()
border();
} else if (lastName === "" && email === "" && password === ""){
last();
mail();
pass();
border();
}else if (email === "" && password === ""){
mail();
pass();
border();
}else if (lastName === "" && email === ""){
last();
mail()
border();
}
else if (lastName === "" && password === ""){
last();
pass();
}else if(firstName === "" && lastName === ""){
first();
last();
border();
}
else if (firstName === "" && firstName === nameReg){
first()
border();
} else if (lastName === "" && lastName === nameReg){
last();
border();
} else if (email === ""){
mail();
border();
} else if (password === ""){
pass();
border();
}else{
form.reset();
}
})
///First Name Text
const first = () =>{
document.getElementById("firstImg").style.display = "initial";
document.getElementById("firstName").style.display = "block";
form.firstName.placeholder = "";
}
// Last name Text
const last = () =>{
document.getElementById("secondImg").style.display = "initial";
document.getElementById("secondName").style.display = "block";
form.lastName.placeholder ="";
}
// Email
const mail = () =>{
document.getElementById("thirdImg").style.display = "initial";
document.getElementById("third").style.display = "block";
form.email.placeholder = "email#example/com";
form.email.setAttribute("class","placeholder");
}
//Password Text
const pass = () =>{
document.getElementById("fourthImg").style.display = "initial";
document.getElementById("fourth").style.display = "block";
form.password.placeholder ="";
}
/// Border for the input fields
const border = () =>{
input.forEach((field)=>{
if(field.value === ""){
field.style.border ="2px solid hsl(0, 100%, 74%)";
} else{
field.style.border= "1px solid black";
}
}
)};
*,
*:focus,
*::before,
*::after {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body{
background-image:url(../images/bg-intro-desktop.png);
background-color: hsl(0, 100%, 74%);
font-family: 'Poppins', sans-serif;
height: 100%;
width: 100%;
}
.grid{
display: grid;
grid-template-columns: 33% 40%;
justify-content: space-evenly;
}
.h2{
color: white;
font-weight:bolder;
font-size: 3.2em;
}
.paragraph{
color: white;
font-size: 0.9em;
}
#firstH2{
margin-bottom: -14px;
}
.box{
background-color: white;
border-radius: 10px;
text-align: center;
height: auto;
box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
}
.firstButton{
font-family: 'Poppins', sans-serif;
width: 100%;
border: 0;
color: white;
background-color: hsl(248, 32%, 49%);
font-size: 1.1em;
padding: 16px;
border-radius: 10px;
box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
font-weight: bolder;
}
.firstButton span{
font-size: 0.8em;
font-weight: normal;
}
input {
font-family: 'Poppins', sans-serif;
width: 90%;
padding: 15px;
font-size: 1em;
border: 1px solid hsl(246, 25%, 77%);
border-radius: 5px;
font-weight: 600;
color: hsl(249, 10%, 26%);
}
input:focus{
font-family: 'Poppins', sans-serif;
font-size: 1em;
padding: 15px;
border: 1px solid black;
border-radius: 5px;
font-weight: 600;
color: hsl(249, 10%, 26%);
}
input::placeholder{
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.placeholder::placeholder{
color: hsl(0, 100%, 74%);
}
#greenButton{
width: 90%;
border: 0;
padding: 16px;
background-color: hsl(154, 59%, 51%);
border-radius: 10px;
box-shadow: 0px 5px hsl(154, 65%, 43%);
}
#greenButton span{
font-family: 'Poppins', sans-serif;
color: white;
font-size: 1.3em;
font-weight: bold;
}
#greenButton:hover{
cursor: pointer;
background-color: hsl(154, 94%, 65%);
}
.terms{
color: hsl(246, 25%, 77%);
font-size: 12px;
margin-top: 2%;
text-align: center;
}
.terms span a{
text-decoration: none;
color: hsl(0, 100%, 74%);
font-weight: bold;
}
form{
position: relative;
}
#firstImg{
display: none;
position: absolute;
top: 13%;
right: 9%;
}
#secondImg{
display: none;
position: absolute;
top: 29%;
right: 9%;
}
#thirdImg{
display: none;
position: absolute;
top: 45%;
right: 9%;
}
#fourthImg{
display: none;
position: absolute;
bottom: 33.5%;
right: 9%;
}
.errorMessage{
font-size: 0.8em;
color: hsl(0, 100%, 74%);
text-align: right;
font-style: italic;
font-weight: 500;
margin-right: 30px;
margin-top: -25px;
margin-bottom: 18px;
}
#firstName{
display: none;
}
#secondName{
display: none;
}
#third{
display: none;
}
#fourth{
display: none;
}
.attribution{
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
#media only screen and (max-width:700px){
body{
background-image:url(../images/bg-intro-mobile.png);
}
.grid{
grid-template-columns: 90%;
}
.h2,.paragraph{
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Intro component With Sign up Form</title>
</head>
<body>
<div class="container">
<div class="grid">
<!-- 1st grid -->
<div>
<br><br><br><br><br><br><br><br>
<h2 class="h2" id="firstH2">Learn to code by</h2>
<h2 class="h2">watching others</h2><br>
<p class="paragraph">See how experienced solve problems in real time. Watching scripted tutuorials is great, but
understanding how developers think is invaluable.</p>
</div>
<!-- 2nd grid -->
<div>
<div>
<br><br>
<button class="firstButton">Try it free 7 days <span>then $20/mo. thereafter</span></button>
<br><br>
<!-- box for white color -->
<div class="box">
<form>
<br><br>
<input type="text" name="firstName" placeholder="First Name"><br><br>
<img src="../images/icon-error.svg" id="firstImg" alt="error">
<div class="errorMessage" id="firstName">First Name cannot be empty</div>
<input type="text" name="lastName" placeholder="Last Name"><br><br>
<img src="../images/icon-error.svg" id="secondImg" alt="error">
<div class="errorMessage" id="secondName">Last Name cannot be empty</div>
<input type="email" name="email" placeholder="Email Address"><br><br>
<img src="../images/icon-error.svg" id="thirdImg" alt="error">
<div class="errorMessage" id="third">Looks like this is not an email</div>
<input type="password" name="password" placeholder="Password"><br><br>
<img src="../images/icon-error.svg" id="fourthImg" alt="error">
<div class="errorMessage" id="fourth">Password cannot be empty</div>
<button type="submit" id="greenButton"><span>CLAIM YOUR FREE TRIAL</span></button><br>
<div class="terms">
By clicking the button you are agreeing to our <span>Terms and Services</span>
</div><br><br>
</form>
</div>
</div>
</div>
</div>
</div>
<br><br>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Gurkiran Singh.
</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>
Here's a JSFiddle

Here is a Corona-times type answer: I had so much time on my hands that I sat down and tried to rework your example.
My first impression: you should try not to repeart yourself ("DRY" : Don't Repeat Yourself). THis applies to both your HTML as to your JavaScript. I removed quite a few of your IDs as they will make scripting only harder and more verbose. Instead I tried to analyse the structure of your HTML. I first scan through your form and collect all input fields, image tags and divs into an array called inps. This is done by
creating a "proper" Array by applying [... <nodelist>] on the node list I receive from the document.querySelectorAll() call, filtering out all
<input>
<img>
and all elements with class="errorMessage"
I then apply the .reduce() method on this array to create another one (inps, an array of objects), into which
I firstly place the object {inp:el} containing the <input> element and after that
I then extend this "latest" object (a[a.length-1]) with further properties (img and div) containing the error-<img> and the error-message-<div>.
(Caution: this will only work properly, if there is an associated image and an error message div in the HTML for each <input> field!)
Triggered by the submit-event I then walk trough this carefully prepared (inps) array, check the contents of the collected input field and do the necessary actions on the associated images and divs. Inside the inps.forEach(e=>...) call I can access each input element with e.inp and its associated error image and error div with e.img and e.div.
As mentioned before, this has been a "Corona times type exercise" for me to show that it is possible with relatively short code but I strongly recommend using the really good HTML5 methods available (using minlength and the proper types for the input elements!).
const frm=document.forms[0];
const inps=[...frm.querySelectorAll('input,img,.errorMessage')].reduce((a,el,i)=>{
if (i%3==0) a.push({inp:el});
else a[a.length-1][el.tagName.toLocaleLowerCase()]=el;
return a;
},[])
// the following is superfluous, as it will always test as positive for <input type="email">:
const emailRX =/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/;
frm.onsubmit=(ev)=>{
let err,allerrs=0
inps.forEach(e=>{
allerrs+=err=e.inp.value==''? 1 : e.inp.name=="email" ? ( emailRX.test(e.inp.value) ? 0 : 2 ) : 0;
e.img.style.display=['none','initial','initial'][err];
e.div.textContent=['',e.inp.placeholder+' must be filled!','Email appears to be invalid'][err];
})
return allerrs==0;
}
*,
*:focus,
*::before,
*::after {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body{
background-image:url(../images/bg-intro-desktop.png);
background-color: hsl(0, 100%, 74%);
font-family: 'Poppins', sans-serif;
height: 100%;
width: 100%;
}
.grid{
display: grid;
grid-template-columns: 33% 40%;
justify-content: space-evenly;
}
.h2{
color: white;
font-weight:bolder;
font-size: 3.2em;
}
.paragraph{
color: white;
font-size: 0.9em;
}
#firstH2{
margin-bottom: -14px;
}
.box{
background-color: white;
border-radius: 10px;
text-align: center;
height: auto;
box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
}
.firstButton{
font-family: 'Poppins', sans-serif;
width: 100%;
border: 0;
color: white;
background-color: hsl(248, 32%, 49%);
font-size: 1.1em;
padding: 16px;
border-radius: 10px;
box-shadow: 0px 9px rgba(0, 0, 0, 0.2);
font-weight: bolder;
}
.firstButton span{
font-size: 0.8em;
font-weight: normal;
}
input {
font-family: 'Poppins', sans-serif;
width: 90%;
padding: 15px;
font-size: 1em;
border: 1px solid hsl(246, 25%, 77%);
border-radius: 5px;
font-weight: 600;
color: hsl(249, 10%, 26%);
}
input:focus{
font-family: 'Poppins', sans-serif;
font-size: 1em;
padding: 15px;
border: 1px solid black;
border-radius: 5px;
font-weight: 600;
color: hsl(249, 10%, 26%);
}
input::placeholder{
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.placeholder::placeholder{
color: hsl(0, 100%, 74%);
}
#greenButton{
width: 90%;
border: 0;
padding: 16px;
background-color: hsl(154, 59%, 51%);
border-radius: 10px;
box-shadow: 0px 5px hsl(154, 65%, 43%);
}
#greenButton span{
font-family: 'Poppins', sans-serif;
color: white;
font-size: 1.3em;
font-weight: bold;
}
#greenButton:hover{
cursor: pointer;
background-color: hsl(154, 94%, 65%);
}
.terms{
color: hsl(246, 25%, 77%);
font-size: 12px;
margin-top: 2%;
text-align: center;
}
.terms span a{
text-decoration: none;
color: hsl(0, 100%, 74%);
font-weight: bold;
}
form{
position: relative;
}
.errorMessage{
font-size: 0.8em;
color: hsl(0, 100%, 74%);
text-align: right;
font-style: italic;
font-weight: 500;
margin-right: 30px;
margin-top: -25px;
margin-bottom: 18px;
}
form img {display:none} /* hide all error-img first ... */
.attribution{
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
#media only screen and (max-width:700px){
body{
background-image:url(../images/bg-intro-mobile.png);
}
.grid{
grid-template-columns: 90%;
}
.h2,.paragraph{
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<title>Intro component With Sign up Form</title>
</head>
<body>
<div class="container">
<div class="grid">
<!-- 1st grid -->
<div>
<br><br><br><br><br><br><br><br>
<h2 class="h2" id="firstH2">Learn to code by</h2>
<h2 class="h2">watching others</h2><br>
<p class="paragraph">See how experienced solve problems in real time. Watching scripted tutuorials is great, but understanding how developers think is invaluable.</p>
</div>
<!-- 2nd grid -->
<div>
<div>
<br><br>
<button class="firstButton">Try it free 7 days <span>then $20/mo. thereafter</span></button>
<br><br>
<!-- box for white color -->
<div class="box">
<form>
<br><br>
<input type="text" name="firstName" placeholder="First Name" minlength="3"><br><br>
<img src="../images/icon-error.svg" alt="error">
<div class="errorMessage"></div>
<input type="text" name="lastName" placeholder="Last Name" minlength="3"><br><br>
<img src="../images/icon-error.svg" alt="error">
<div class="errorMessage"></div>
<input type="email" name="email" placeholder="Email Address"><br><br>
<img src="../images/icon-error.svg" alt="error">
<div class="errorMessage"></div>
<input type="password" name="password" placeholder="Password"><br><br>
<img src="../images/icon-error.svg" alt="error">
<div class="errorMessage"></div>
<button type="submit" id="greenButton"><span>CLAIM YOUR FREE TRIAL</span></button><br>
<div class="terms">
By clicking the button you are agreeing to our <span>Terms and Services</span>
</div><br><br>
</form>
</div>
</div>
</div>
</div>
</div>
<br><br>
<footer>
<p class="attribution">
Challenge by Frontend Mentor.
Coded by Gurkiran Singh.
</p>
</footer>
<script src="js/script.js"></script>
</body>
</html>

You can just use test() function:
https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
In your case you can try:
if ( emailReg.test(email) ) {
// correct email
} else {
// wrong email
}

Generating Loops and Arrays from User Input and Printing Looped Output

I am editing an existing html file. I have to add a numeric entry field allowing users to indicate the number of volunteers they want to enter information for, and upon pressing enter in said field, generate additional input fields in the form below. Then when the form is submitted, the text on the bottom will replace the placeholders with the text entered in the form and repeated for as many volunteers were indicated in the first field.
I am new to javascript so there's still a lot of things I don't really understand but I am trying to learn. I have attempted referencing similar isolated examples of each action I need to perform but none of it really comes together or works properly for me. I understand that I should be using loop and array functions but can't really piece together how it all connects.
I have the code for the number field as well as the javascript for the text that will get replaced so far notated below:
function changeText() {
var recipient = document.getElementById('recipient').value;
document.getElementById('recipientName').innerHTML = recipient;
var organization = document.getElementById('organization').value;
document.getElementById('organizationName').innerHTML = organization;
var date = document.getElementById('date').value;
document.getElementById('eventDate').innerHTML = date;
var url = document.getElementById('url').value;
document.getElementById('websiteURL').innerHTML = url;
var host = document.getElementById('host').value;
document.getElementById('hostName').innerHTML = host;
return false;
}
body {
font: 15px arial, sans-serif;
color: #808080;
}
input[type=text],
select,
input[type=password],
radio {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
input[type=submit] {
width: 100%;
background-color: #800D1E;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #802F1E;
}
section {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
article {
border-radius: 5px;
background-color: #CCCCCC;
padding: 20px;
color: #222222;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {
background-color: #111;
}
ul.topnav li a.active {
background-color: #CCCCCC;
color: #333
}
ul.topnav li.right {
float: right;
}
#media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {
float: none;
}
}
.top {
position: relative;
background-color: #ffffff;
height: 68px;
padding-top: 20px;
line-height: 50px;
overflow: hidden;
z-index: 2;
}
.logo {
font-family: arial;
text-decoration: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 37px;
letter-spacing: 3px;
color: #555555;
display: block;
position: absolute;
top: 17px;
}
.logo .dotcom {
color: #800D1E
}
.topnav {
position: relative;
z-index: 2;
font-size: 17px;
background-color: #5f5f5f;
color: #f1f1f1;
width: 100%;
padding: 0;
letter-spacing: 1px;
}
.top .logo {
position: relative;
top: 0;
width: 100%;
text-align: left;
margin: auto
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Invitation Page</title>
</head>
<body>
<header>
<div class="top">
<a class="logo" href="index.html">Volunteers<span class="dotcom">.org</span></a>
</div>
<nav>
<ul class="topnav">
<li>Home
</li>
<li>Invitation
</li>
<li>Gallery
</li>
<li>Registration
</li>
</ul>
</nav>
</header>
<br/>
<label for="volunteeramount">Number of Volunteers:</label>
<input type="number" name="volunteeramount" id="volunteers" placeholder="#" min="1" max="10">
<section id="pageForm">
<form action="#" onsubmit="return false;">
<br/>
<label for="recipientName">Recipient Name:</label>
<input type="text" name="recipientName" id="recipient" placeholder="Enter your Recipient Name" />
<label for="organizationName">Organization Name:
</label>
<input type="text" name="organizationName" id="organization" placeholder="Enter your Organization Name" />
<label for="eventDate">Event Date:
</label>
<input type="text" name="eventDate" id="date" placeholder="Enter your Event Date" />
<label for="websiteURL">URL:
</label>
<input type="text" name="websiteURL" id="url" placeholder="Enter your Website URL" />
<label for="hostName">Host Name:
</label>
<input type="text" name="hostName" id="host" placeholder="Host Name" />
<input type="submit" value="Submit" onclick="changeText()">
</form>
</section>
<article id="placeholderContent">
Hello <span id="recipientName">recipientName</span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id="organizationName">organizationName</span> on <span id="eventDate">eventDate</span>. Please come to the following website: <span id="websiteURL">websiteURL</span> to sign up as
a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id="hostName">hostName</span>
</article>
</body>
</html>
Any help would be appreciated in advance. I'm not sure if I should include any other information but please let me know if I do, I will try to provide what I can. Thank you.

javascript is not working

jsp and a loginValidate.js i have provided a link to js in jsp. But the login form is not getting validates. I have a span id which should display an error message but its not happening.
my login.jsp is:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Header</title>
<script type="text/javascript" src="js/LoginValidate.js"></script>
<link href="CSS/Header.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div class="wrapper col1">
<div id="header">
<div id="logo">
<h1>
<U>SK Business Group, Inc.</U>
</h1>
<p>
<strong>Helping GROW your business</strong>
</p>
</div>
<div class="wrapper col6">
<div id="head">
<div id="login">
<h2>Login !</h2>
<B>Already have an account.LOGIN here</B>
<form name="login" action="LoginValidateServlet" method="post"
onSubmit="return loginValidate()">
<input type="hidden" name="pagename" value="login" />
<fieldset>
<legend>Client Login</legend>
<div class="fl_left">
<input type="text" name="txtUsername" id="uname" value="Enter Username…" onfocus="this.value=(this.value=='Enter Username…')? '' : this.value;" /><br />
<span id="errorUserNameMissing" style="display: none;"><font
color="red">*Enter user name.</font></span>
<input type="password" name="txtPassword" id="pass" value="Enter Password…" onfocus="this.value=(this.value=='Enter Password…')? '' : this.value ;" /><br/> <br/><span
id="errorPasswordMissing" style="display: none;"><font
color="red">*Enter Password.</font></span>
<select name="txtCategory" id="txtCategory" style="width: 230px">
<option value="unknown">Select your Category</option>
<option value="Admin">Admin</option>
<option value="Affiliate">Affiliate</option>
<option value="Client">Client</option>
</select>
</div>
<div class="fl_right">
<input type="submit" name="login_go" id="login_go"
value="»" />
</div>
</fieldset>
</form>
<p>
» Lost Your Password | Create An Account »
</p>
</div>
<br class="clear" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And this is my CSS
#CHARSET "ISO-8859-1";
#top {
margin: 0;
padding: 0;
font-size: 12px;
font-family: verdana, Arial, Helvetica, sans-serif;
color: #000000;
background-color: #DDDDDD;
}
.clear {
clear: both;
}
br.clear {
clear: both;
margin-top: -15px;
}
a {
outline: none;
text-decoration: none;
}
.fl_left {
float: left;
}
.fl_right {
float: right;
}
div.wrapper {
display: block;
width: 100%;
margin: 0;
text-align: left;
}
div.wrapper h1,div.wrapper h2,div.wrapper h3,div.wrapper h4,div.wrapper h5,div.wrapper h6
{
margin: 0 0 20px 0;
padding: 0 0 8px 0;
font-size: 20px;
font-weight: normal;
font-family: Georgia, "Times New Roman", Times, serif;
border-bottom: 1px dotted #DDDDDD;
}
.col1 {
color: #2684B7;
background-color: #E3F1F9;
}
.col6 {
color: #999999;
background-color: #F3F3F3;
}
.col6 a {
color: #2684B7;
background-color: #F3F3F3;
}
#logo {
width: 378px;
}
#header,#head {
color: #2684B7;
position: relative;
margin: 0 auto 0;
display: block;
width: 960px;
}
#header {
padding: 30px 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
#header #logo {
display: block;
float: left;
width: 300px;
width: 100%;
margin-top: 7px;
}
#header #logo h1,#header #logo p {
margin: 0;
padding: 0;
line-height: normal;
}
#header #logo h1 {
margin: 0 0 10px 0;
padding: 0;
font-size: 36px;
border: none;
}
#header h1 a {
color: #3A6C86;
background-color: #E3F1F9;
}
#header #login {
width: 300px;
height: 250px;
float: right;
padding: 10px 10px 12px 10px;
color: #000000;
background-color: #ADD6ED;
}
#header #login p {
margin: 0 0 8px 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#head {
padding: 30px 0;
}
#head h2 {
margin-bottom: 10px;
border-bottom: 1px dotted #999999;
}
#login {
display: block;
float: right;
width: 300px;
}
form,fieldset,legend {
margin: 0;
padding: 0;
border: none;
}
legend {
display: none;
}
#header input {
display: block;
float: left;
width: 155px;
margin: 0 11px 0 0;
padding: 5px;
color: #4C4C4C;
background-color: #FFFFFF;
border: 1px solid #396B86;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#header input#login_go {
width: auto;
height: auto;
margin: 0;
padding: 4px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
background-color: #4D9FC7;
cursor: pointer;
}
#head form {
display: block;
width: 300px;
margin: 0;
padding: 10px 0 0 0;
border: none;
}
#head input {
display: block;
width: 218px;
margin: 0 0 10px 0;
padding: 5px;
color: #FFFFFF;
background-color: #2684B7;
border: 1px solid #1C5E82;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#head input#login_go {
width: 58px;
height: 100px;
margin: 0;
padding: 0;
font-weight: bold;
text-transform: uppercase;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 60px;
cursor: pointer;
}
#head select#txtCategory {
width: width:956px;
}
And this is my LoginValidate.js
function loginValidate() {
var valid = true;
var validationMessage = 'Please correct the following errors:\r\n';
document.getElementById('errorUserNameMissing').style.display = 'none';
document.getElementById('errorPasswordMissing').style.display = 'none';
if ((document.getElementById('uname').value = 'Enter Username…')||(document.getElementById('uname').value.length == 0) ){
validationMessage = validationMessage + ' - UserName is missing\r\n';
document.getElementById('errorUserNameMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorUserNameMissing').style.display = 'none';
}
if ((document.getElementById('pass').value = 'Enter Password…')||(document.getElementById('pass').value.length == 0) ){
validationMessage = validationMessage + ' - Password is missing\r\n';
document.getElementById('errorPasswordMissing').style.display = 'block';
valid = false;
} else {
document.getElementById('errorPasswordMissing').style.display = 'none';
}
if (valid == false) {
alert(validationMessage);
}
return valid;
}
please some one help in validating the login page with errors on not providing any input(it should display respective error message).
Thanks in advance

In the JavaScript
document.getElementById('uname').value
returns "Enter Username…" that is the default value and
document.getElementById('uname').value.length
returns 15 that's why the condition is not matched.
You have to check for default value along with length.
document.getElementById('uname').value = 'Enter Username…'
But once this field is focused the value is empty and it works fine.

your code provide null pointer exception here
document.getElementById('errorPassWordMissing').style.display = '';
exception raise and your function does not return false and form post data.
use placeholder property instead of value and focus event, for example
<input type="password" name="txtPassword" id="pass" placeholder="Enter password…" />
also may be you should use jQuery and validation plugin
http://plugins.jquery.com/validate/

One obvious problem I can see. This is wrong:
document.getElementById('errorUserNameMissing').style.display = '';
You shouldn't be setting style.display to a blank string. It should be one of the standard CSS display types, like "inline" or "block" (and there are other types).

What is wrong with this tabbed content?

I have a google map and a contact form on my contact.html file. They were displayed block as default. I wanted to change it to a tabbed look.
Let's say i have a code like this in HTML:
<div id="tab-group" class="tab-group">
<h3 class="tab-header activate" id="tab-header-1">We are here</h3>
<div class="tab-content activate" id="tab-content-1"></div>
<h3 class="tab-header" id="tab-header-2">Contact us</h3>
<div class="tab-content" id="tab-content-2">
The content in that div with the id="tab-content-1" , I have a google map with the necessary script in the head. And in div with the id="tab-content-2", I have a contact form like;
<form class="tab-content-2" method="post" action="contact-post.html">
<div>
<span><label>NAME</label></span>
<span><input name="userName" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<span><input name="userEmail" type="text" class="textbox"></span>
</div>
<div>
<span><label>PHONE</label></span>
<span><input name="userPhone" type="text" class="textbox"></span>
</div>
<div>
<span><label>YOUR MESSAGE</label></span>
<span><textarea name="userMsg"> </textarea></span>
</div>
<div>
<span><input type="submit" value="Send me"></span>
</div>
</form>
Here is the JavaScript:
"use strict";
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('tab-group').className = 'activate';
var headerClass = 'tab-header',
contentClass = 'tab-content';
document.getElementById('tab-group').addEventListener('click', function(event) {
var myHeader = event.target;
if (myHeader.className !== headerClass) return;
var myID = myHeader.id, // e.g. tab-header-1
contentID = myID.replace('header', 'content'); // result: tab-content-1
deactivateAllTabs();
myHeader.className = headerClass + ' activate';
document.getElementById(contentID).className = contentClass + ' activate';
});
function deactivateAllTabs() {
var tabHeaders = document.getElementsByClassName(headerClass),
tabContents = document.getElementsByClassName(contentClass);
for (var i = 0; i < tabHeaders.length; i++) {
tabHeaders[i].className = headerClass;
tabContents[i].className = contentClass;
}
}
});
I know I have to clean all these up but i am lost in such a basic thing and getting angry, here is the CSS:
#tab-group h3 {
text-align: left;
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
.activate {
position: relative;
margin-bottom: 2em;
}
#tab-group.activate .tab-header {
font-weight: normal;
font-size: 13px;
text-transform: uppercase;
padding: 4px 6px;
display:inline;
}
.activate .tab-header {
position: absolute;
top: 0;
margin: 0;
padding: 0.25em 0.5em;
left: 0;
background: rgba(168, 161, 152, 0.34);
border: 1px solid #161616;
border-radius: 4px 4px 0 0;
z-index: 2;
cursor: pointer;
}
.activate .tab-header.activate {
background: #000;
}
.activate .tab-content {
position: relative;
top: 0;
margin: 0;
padding: 0.5em;
top: 24px;
border: 1px solid #999;
z-index: 1;
background: white;
zoom: 1;
}
.activate .tab-content:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.activate #tab-header-2 {
left: 9em;
}
.activate .tab-content {
}
.activate .tab-content:active {
display: block;
}
#tab-content-1 {
width: 56.4em;
height:30em;
}
#tab-header-1 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-header-2 {
text-shadow: 0 1px 0 #161616;
font-family: 'Julius Sans One', sans-serif;
font-size: 1.8em;
color: #FFD955;
padding-bottom: 20px;
}
#tab-content-2{
position:relative;
padding-bottom:30px;
background-color:#000;
}
I want it to act like a simple tabbed content. Yet, the contents of the tabs are displayed as block and it doesn't change the content when you click on h3 tab-headers.
it looks like this.....
What am I doing wrong ? Thanks in advance...

It should just be a simple fix. Try adding:
.activate .tab-content { display: none; }
.activate .tab-content.activate { display: block; }
That way, only the active tab is visible, and the others are hidden.
Check it out: http://jsfiddle.net/t8G57/2/