'Insert text to specific span from in specific case using Javascript

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)
    }
}
javascripthtmlscript


Solution 1:[1]

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>

Solution 2:[2]

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)
    }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Lilach Bochov

Related Questions