1

Quiero validar que al presionar un botón se valide si el input, en caso de estar vacío que salga un alert y que haga foco en ese input pero lo que sucede es que si esta vacío me sale el alerta pero me manda a otra página. Objetivo. que al estar vacío el input salga un alert y haga foco en el botón. Sino está vació que se redirija a otra página que se declara en el action="".

Código modificado

Formulario:

<form onsubmit="return control();" method="post" action="@Url.Action("Login", "Home")" >
                <input type="text" id="uname" placeholder="Ingrese usuario..." name="uname" >
                <input type="password" placeholder="Ingrese contraseña..." name="psw" required>

                <button type="submit">Iniciar sesión</button>
        </form>

Script:

<script>
    function control() {
        if (document.getElementById('uname') == null
            || document.getElementById('uname') == "") {
            alert("El campo no puede estar vacío.");
            document.getElementById('uname').focus();
            return false;
        }
        return true;
    }
</script>

El error:

introducir la descripción de la imagen aquí

6
  • 1
    Parece ser debido a que el formulario se estaría intentado procesar, lo que puedes hacer es obtener al botón de validación y darle un preventDefault para que haga la tarea asignada pero permanezcas en la misma página
    – user128299
    Commented el 22 jul. 2020 a las 19:16
  • Sí, eso me ha funcionado la cosa es que agregando esa línea si agrego un valor al campo, me sale el alert del error y me deja en la misma página. @BetaM Commented el 22 jul. 2020 a las 19:20
  • 1
    Otra alternativa a las ya comentadas, puede ser onsubmit en el form. Si devuelves true en el js hará lo que está en action, en el caso contrario no. onsubmit="return control()"
    – Juan José
    Commented el 22 jul. 2020 a las 19:28
  • De hecho, hice eso también pero el resultado fue el mismo @JuanJosé Commented el 22 jul. 2020 a las 19:34
  • 1
    @FranqoBalsamo te dejé como respuesta un par de opciones, chécalas y me avisas como te va
    – user128299
    Commented el 22 jul. 2020 a las 19:35

3 respuestas 3

1

No se si lo que buscas es a algo como esto, pero con Jquery seria algo asi:

      $(document).ready(function() {
         $('#searchForm').on('submit', function(event) {
            var $searchValue = $('#searchValue').val();
            if ($searchValue === "") {
               event.preventDefault();
                  var error = '<br><span style="color: red;">Error. Vacio.</span>';
                  $('#searchValue').after($(error).fadeOut(2000));
                  $('#searchValue').css( "border-color","red");
            }
         });
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="processadordeforma.php" method="POST" id="searchForm">
   <p>Search <input type="text" id="searchValue"></p>
   <button type="submit">Submit</button>
</form>

Nota que si el valor del input esta vacio. La forma no se postea, y se adjunta un <span> con error en rojo en la parte de abajo que desaparece despues de un tiempo. Puedes hacer esto para todos tus inputs y ademas agregar mas cosas de validacion que te den diferentes mensajes de error. Nota tambien que si el input si tiene un valor la forma se postea.

3
  • Vaya, esto ha sido de otra forma pero es la respuesta que necesitaba, muchas gracias Commented el 22 jul. 2020 a las 21:28
  • Al jQuery, ¿Lo puedo meter en una carpeta o sí o sí lo debo tener en el html donde se encuentra el form? Commented el 22 jul. 2020 a las 22:16
  • De alguna manera debes de ligar el jquery, ya sea que lo tengas en una carpeta o como liga a un cdn. Yo lo uso como cdn en mi header <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> pero pues es cuestion de preferencia.
    – xelfury
    Commented el 22 jul. 2020 a las 22:23
1

En tu código he encontrado par de errores que son interesantes de corregir.

En primer lugar cuando haces document.getElementById(uname) se te ha olvidado poner entre comillas el ID, ya que no lo está detectando como texto, si no como objeto.

Para solucionar que el formulario no haga el action si no cumple los requisitos, es necesario que utilices onsubmit.

function control() {

    if (document.getElementById('uname') == null || document.getElementById('uname')=="") {
        alert("El campo no puede estar vacío.");
        document.getElementById('uname').focus();
        return false;
    }

    return true;
}
<form class="modal-content animate" onsubmit="return control();" method="post" action="index.html" >
            <div class="imgcontainer">
                <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
                <img src="~/Images/00.png" alt="Avatar" class="avatar">
            </div>

            <div class="container">
                <label for="uname"><b>Usuario:</b></label>
                <input type="text" id="uname" placeholder="Ingrese usuario..." name="uname" >

                <label for="psw"><b>Contraseña:</b></label>
                <input type="password" placeholder="Ingrese contraseña..." name="psw">

                <button type="submit">Iniciar sesión</button>
                <label>
                    <input type="checkbox" checked="checked" name="remember"> Recuérdame
                </label>
            </div>

            <div class="container" style="background-color:#f1f1f1">
                <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancelar</button>
            </div>
        </form>

Al devolver false en el javascript, no se ejecutará el action. Si devuelves true lo ejecutará.

Otro error es la forma en la que das focus al input. Estabas usando una forma incorrecta. Para hacer focus debes hacer: document.getElementById('uname').focus();, ya que necesitas hacer referencia al input del HTML.

PD: teniendo en cuenta el potencial que tiene onsubmit, podrías aprovecharlo para aplicar más restricciones incluso al campo de contraseña. (O regex si el usuario debe ser un email, etc...)

Puedes echarle un vistazo a la documentación del focus().

Espero haberte ayudado.

4
  • Hola, gracias por la idea pero tampoco ha funcionado Commented el 22 jul. 2020 a las 19:54
  • 1
    ¿Qué es lo que exactamente no ha funcionado? En principio comprueba si el campo usuario está vacío, y en ese caso no hace el action.
    – Juan José
    Commented el 22 jul. 2020 a las 19:55
  • Pues, mira he subido un gif mostrando como esto no hace nada. He modificado mi código de la fomar en la que lo explicas pero como se ve en el gif borro el campo y al presionar el botón o enter me redirige a la página cosa que no tendría que hacer sin mencionar que el alert no sale Commented el 22 jul. 2020 a las 20:06
  • He modificado el código de la pregunta para que no sea tan largo de leer. Es decir, quité los componentes que no interesan como div, etc Commented el 22 jul. 2020 a las 20:10
1

Opciones:

  • La forma mas simple sería el agregar el atributo required a tus inputs eso generaría que cuando presiones el botón del formulario si es que estos no se han llenado entonces te quedes en la misma página y el foco se ponga en dicho input

    <input type="text" required>
    

Por otro lado, si lo dejamos con JS, te manda a otra página por que:

  • Tienes un atributo action declarado en el form diciéndole a donde mandar la información
  • No estás previniendo el comportamiento de submit que el botón tendría se lleve a cabo

Como ejemplo para que veas como implementarlo pudieras hacerlo así:

  • Obtenemos y asignamos en variables tanto a la caja de texto como al botón
  • Al botón le agregamos un listener en su evento click
  • Por dentro del callback prevenimos el comportamiento por defecto
  • En un condicional evaluamos si la propiedad value del input esta vacía
    • En caso de estar vacía le indicamos que el input tenga el foco activado

    <form action="url">
      <input id="elemento" type="text">
      <input id="envio" type="submit">
    </form>
    <script>
        let botonEnvio = document.getElementById('envio');
        let texto      = document.getElementById('elemento');
      
        botonEnvio.addEventListener('click', (event) => {
          event.preventDefault();
          
          if (texto.value === '') {
            texto.focus();
          }
        })
    </script>

EDICIÓN

Para complementar mi respuesta considero que debería ser así:

  • Sigues los pasos anteriores
  • En el else harías una petición AJAX mandando a tu backend los datos
  • Una vez recibidos en el backend harías la consulta SQL necesaria para verificar la existencia del registro
  • Una vez lo verifiques si existe el registro entonces haces un redirect tal vez al panel donde corresponde y sino haces un redirect al mismo formulario de login
5
  • Gracias, pero el problema es reincidente. Es decir, lo que me muestras funciona al perfecto al momento de presionar el botón cuando está vacío el campo pero cuando el campo no está vacío no sucede nada Commented el 22 jul. 2020 a las 19:38
  • 1
    y que quieres que ocurra cuando el campo esté lleno? que se procese tu formulario? @FranqoBalsamo, te lo pregunto por que eso no esta explicado en tu pregunta
    – user128299
    Commented el 22 jul. 2020 a las 19:38
  • Que me redirija a otra página. Lo que quiero es que si está vacío el campo, haga foco en en campo y no suceda nada en la página. Sino está vacío quiero que vaya a otra página, por eso el form tiene el action Commented el 22 jul. 2020 a las 19:41
  • 1
    Vaya, mas tarde regreso a editar y proponer
    – user128299
    Commented el 22 jul. 2020 a las 19:56
  • Vale, muchas gracias por la ayuda Commented el 22 jul. 2020 a las 20:10

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.