Tengo en HTML, tres campos de entrada y un botón. debajo de cada entrada tengo un lapso. Cada clic en el botón activa una función en la que se colorea el campo vacío en rojo. ¿Cómo puedo insertar un texto en el espacio debajo de la entrada en caso de que el campo esté vacío?
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) } }Puede hacer que el navegador aplique los campos obligatorios en un elemento <form> con el atributo required :
<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>Puede diseñar las pseudoclases :required y :invalid:
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, entonces las respuestas anteriores del tipo de personas realmente no respondieron la pregunta, pregunté cómo agregar un texto al intervalo específico mediante JavaScript en caso de que el campo esté vacío. Cualquiera, esta es la respuesta que obtuve:
función mostrarError() {
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) } }