es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

hacer que los campos de entrada tengan estilo cuando contengan valores

27 Jul, 2023 Programación

¿Cómo hago que los campos obligatorios en mi formulario de entrada tengan un borde rojo cuando se cargue la página y estén vacíos, y cómo restablecer su estilo a la normalidad cuando tengan datos dentro?

Tengo este código:

Página:

<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()">
   <div>
      <label for="firstName">Nombre:</label><br>
      <input type="text" name="firstName" id="firstName" placeholder="Nombre...">
   </div>
   <div>
      <label for="lastName">Apellido:</label><br>
      <input type="text" name="lastName" id="lastName" placeholder="Apellido...">
   </div>
</form>

Javascript:

// Color del borde para formularios web de entrada
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.classList.add("form-required");
} else {
    firstNameId.classList.remove("form-required");
}
if (lastName == '') {
    lastNameId.classList.add("form-required");
} else {
    lastNameId.classList.remove("form-required");
}
}

CSS:

.form-required {border: 2px solid red !important;}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que los campos obligatorios en su formulario de entrada tengan un borde rojo cuando se carga la página y están vacíos, y para establecer de nuevo el estilo normal cuando tienen datos, puede utilizar el siguiente código:

    • Agregue una clase CSS llamada “form-required” con el estilo de borde rojo:
    .form-required {border: 2px solid red !important;}
    • Añada un atributo “onload” a su etiqueta de formulario para llamar a una función de JavaScript cuando se cargue la página:
    <form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data" onload="borderColour()">
    • Cree una función de JavaScript llamada “borderColour” y úsela para verificar si los campos obligatorios están vacíos o no. Si los campos están vacíos, agregue la clase CSS “form-required” al elemento de entrada. Si los campos tienen datos, elimine la clase CSS “form-required”:
    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.classList.add("form-required");
    } else {
        firstNameId.classList.remove("form-required");
    }
    if (lastName == '') {
        lastNameId.classList.add("form-required");
    } else {
        lastNameId.classList.remove("form-required");
    }
}

    Este código agregará el borde rojo a los campos obligatorios cuando se cargue la página y estén vacíos, y eliminará el borde rojo cuando tengan datos en su interior.

Comments are closed.