¿Cómo hago para que los campos obligatorios en mi formulario de entrada tengan un borde rojo cuando la página está cargada y están vacíos, y cómo restablecer su estilo normal cuando tienen datos dentro?
tengo este codigo:
Página:
<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()"> <div> <label for="firstName">First Name:</label><br> <input type="text" name="firstName" id="firstName" placeholder="First name …"> </div> <div> <label for="lastName">Last Name:</label><br> <input type="text" name="lastName" id="lastName" placeholder="Last name …"> </div> </form>JavaScript:
// Border colour for input web forms function borderColour() { var firstName = document.getElementById('firstName').value; var lastName = document.getElementById('lastName').value; var firstNameId = document.getElementById('firstName'); var lastNameId = document.getElementById('lastName'); if (firstName == '') { firstNameId.addClass("form-required"); } else { firstNameId.removeClass("form-required"); } if (lastName == '') { lastNameId.addClass("form-required"); } else { lastNameId.removeClass("form-required"); } }CSS:
.form-required {border: 2px solid red !important;}No puedo agregar un comentario, así que veo que a su selector CSS le falta un punto para definir una clase. Si ese no es el problema me avisas.
Ok, el problema es que está usando AddClass() como función, pero es una función jQuery . En su lugar, debe usar .classList.add("form-required") . Y lo mismo con el método removeClass . En su lugar, debe usar .classList.remove("form-required")
Y no olvide llamar a su función después de la definición de la función. Como esto:
borderColour(); Pero necesita un event listener en lugar de llamar a su función once on page load . Por lo tanto, debe agregar esta función a tal vez un evento de pulsación de tecla en las entradas.
HTML
<form id="theForm" method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()"> <div> <label for="firstName">First Name:</label><br> <input type="text" name="firstName" id="firstName" placeholder="First name …"> </div> <div> <label for="lastName">Last Name:</label><br> <input type="text" name="lastName" id="lastName" placeholder="Last name …"> </div> </form>CSS
.form-required {border: 2px solid red !important;}Javascript (vainilla pura)
// Border colour for input web forms function borderColour() { // You could use below comment to select all inputs but you will probably need to select a textarea too. So selection is a next step. //var inputs = document.querySelectorAll('input'); var firstNameSelector = document.getElementById('firstName'); var value = firstNameSelector.value; console.log(firstNameSelector.value); if(value == '') { firstNameSelector.classList.add("form-required"); } else { firstNameSelector.classList.remove("form-required"); } } //Adding an event listener to the form element. If you click outside the form you will get the class toggle if the input is empty it will get the red border an so on... document.getElementById("theForm").addEventListener("focusout", borderColour);Puede agregar el detector de eventos a todos los elementos de entrada, pero para hacerlo necesitará un bucle (tal vez un foreach) como en las otras respuestas.
Aquí hay un fragmento de trabajo
// Border colour for input web forms function borderColour(e) { if(e.target.value == '') { e.target.setAttribute("class", "form-required"); } else { e.target.removeAttribute("class"); } } var inputs = document.querySelectorAll('input'); inputs.forEach(function(el){ el.onpropertychange = borderColour; el.oninput = borderColour; }); .form-required {border: 2px solid red !important;} <form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()"> <div> <label for="firstName">First Name:</label><br> <input type="text" name="firstName" id="firstName" placeholder="First name …"> </div> <div> <label for="lastName">Last Name:</label><br> <input type="text" name="lastName" id="lastName" placeholder="Last name …"> </div> </form>Sugeriría usar CSS en lugar de JavaScript:
input, input:placeholder-shown { /* default <input> styles */ border: 1px solid red; } input:not(:placeholder-shown) { /* has a value entered */ border-color: gray; }Referencias: