I have in HTML, three input fields and one button. beneath each input I have a span. Every click on the button triggers a function in which colors the empty field in red, How can I insert a text to the span beneath the input in case the empty field?
HTML:
<head>
<title>Document</title>
<link rel="stylesheet" href="train.css">
</head>
<body>
<div class="container">
<label for="firstName">First Name</label>
<input type="text" name="" id="firstName">
<span ></span>
<label for="lastName">Last Name</label>
<input type="text" name="" id="lastName">
<span ></span>
<label for="email">Email</label>
<input type="email" name="" id="email">
<span></span>
</div>
<button onclick="showError()"> Show</button>
<script src="train.js"></script>
</body>
</html>
JS
function showError() {
const firstNameEl = document.getElementById("firstName");
const lastNameEl = document.getElementById("lastName");
const emailEl = document.getElementById("email");
let rowsAreFilled = true
let arrayOfAllInfo = [firstNameEl, lastNameEl, emailEl]
for (let i = 0; i < arrayOfAllInfo.length; i++) {
if (arrayOfAllInfo[i].value === "") {
arrayOfAllInfo[i].style.background = "red"
rowsAreFilled = false
}
else {
arrayOfAllInfo[i].style.background = ""
}
}
if (rowsAreFilled === true) {
alert("first name: " + arrayOfAllInfo[0].value + "\n" + "last name: " + arrayOfAllInfo[1].value + "\n" + "email: " + arrayOfAllInfo[2].value)
}
}
You can have the browser enforce required fields for you in a <form> element with the required attribute:
<head>
<title>Document</title>
<link rel="stylesheet" href="train.css">
</head>
<body>
<form class="container">
<label for="firstName">First Name</label>
<input required type="text" name="" id="firstName">
<label for="lastName">Last Name</label>
<input required type="text" name="" id="lastName">
<label for="email">Email</label>
<input required type="email" name="" id="email">
<button> Show</button>
</form>
<script src="train.js"></script>
</body>You can style the :required and :invalid pseudo classes:
input:required {
placeholder: 'required';
border: 2px solid black;
}
input:invalid:focus {
border: 2px solid red;
background-color: #f004;
}<head>
<title>Document</title>
<link rel="stylesheet" href="train.css">
</head>
<body>
<form class="container">
<label for="firstName">First Name</label>
<input required type="text" name="" id="firstName">
<label for="lastName">Last Name</label>
<input required type="text" name="" id="lastName">
<label for="email">Email</label>
<input required type="email" name="" id="email">
<button>Show</button>
</form>
<script src="train.js"></script>
</body>Ok, so the answers above of the kind people didn't really answer the question, I asked how to add a text to the specific span by JavaScript in case of empty field.. Any, this is the answer I got to:
function showError() {
const firstNameEl = document.getElementById("firstName");
const lastNameEl = document.getElementById("lastName");
const emailEl = document.getElementById("email");
const errorOneSpan = document.getElementById("errorOne");
const errorSecSpan = document.getElementById("errorSec");
const errorthreeSpan = document.getElementById("errorthree");
let rowsAreFilled = true
let arrayOfSpans = [errorOneSpan, errorSecSpan, errorthreeSpan ]
let arrayOfAllInfo = [firstNameEl, lastNameEl, emailEl]
for (let i = 0; i < arrayOfAllInfo.length; i++) {
if (arrayOfAllInfo[i].value === "") {
arrayOfAllInfo[i].style.background = "red"
arrayOfSpans[i].innerText = "Error!"
rowsAreFilled = false
}
else {
arrayOfAllInfo[i].style.background = ""
arrayOfSpans[i].innerText = ""
}
}
if (rowsAreFilled === true) {
alert("first name: " + arrayOfAllInfo[0].value + "\n" + "last name: " + arrayOfAllInfo[1].value + "\n" + "email: " + arrayOfAllInfo[2].value)
}
}