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
    Commented 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
    Commented el 16 jun. 2017 a las 15:05
  • Ok, muchas gracias igual !!!
    – MNibor
    Commented el 16 jun. 2017 a las 15:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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