1

Estoy readaptando el código de un formulario de logueo, en el que el usuario ingresa el nombre de usuario o correo electrónico y la contraseña. Por diversos procesos de PHP, analiza el nombre de usuario o el del correo, si existe y posteriormente verifica la contraseña ingresada. El código del formulario de ingreso es el siguiente:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css" rel="stylesheet"/>

<div style="padding-left: 20%; padding-right: 20%">

<form class="ui form" role="form" action="<?php $_SERVER['PHP_SELF'] ?>" method="POST" autocomplete="off">
    <div style="display:none" id="login-alert"></div>

    <h3>Iniciar Sesión</h3>

    <div class="field">
        <label>Usuario o Email:</label>
        <input id="usuario" type="text" name="usuario" required>
    </div>

    <div class="field">
        <label>Contraseña:</label>
        <input id="password" type="password" name="password" required>
    </div>

    <button class="ui green button" type="submit">Iniciar Sesión</button>

    <div style="float: right; font-size: 85%; position: relative; padding-top: 5px">
        <a href="recupera.php">Recuperar contraseña</a>
    </div>

    <br><br>

    <div style="widht: 50%; align: center">
        <div id="login-alert" class="ui red message">
            <div><h4><?php echo resultBlock($errors); ?></h4></div>
        </div>
    </div>

</body>

el tema es que cuando se muestra el formulario se muestra de la siguiente forma: introducir la descripción de la imagen aquí

el campo ese rojo no debería estar ahi

1 respuesta 1

2

Si no quieres que el cuadro rojo aparezca ahí cuando no hay errores, debes agregar algún tipo de condición que controle que aparezca o no, bien sea por PHP o JavaScript, según como manejes la validación de los campos:

PHP (al recibir el formulario y procesar los datos o compararlos con la base de datos):

<!-- Adapta el condicional según como almacenes la información en $errors -->
<?php if ($errors) { ?>
  <div style="width: 50%; align: center">
    <div id="login-alert" class="ui red message">
        <div><h4><?php echo resultBlock($errors); ?></h4></div>
    </div>
  </div>
<?php } ?>

En JavaScript puedes hacer una validación inicial, digamos si los campos están vacíos, antes de enviar el formulario, puedes ver varias opciones de validar en esta pregunta y ocultar/mostrar dicho cuadro si lo necesitas:

Código para validar un formulario con JavaScript

3
  • genial !!!... si, con esa sola linea de código bastó... existe alguna función por la cual el mensaje de error pueda desaparecer automáticamente luego de ponele, 20 segundos ?
    – MNibor
    el 16 jun. 2017 a las 14:49
  • No veo algo así en Semantic UI como tal, tendrías que usar JavaScript o jQuery, es sencillo, busca en Google.
    – Shaz
    el 16 jun. 2017 a las 15:05
  • Ok, muchas gracias igual !!!
    – MNibor
    el 16 jun. 2017 a las 15:07

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.