0

Tengo un formulario donde uso boostrap y jquery.

Tengo los campos input text como required, pero cuando hago pulso en el botón de "enviar" no me marca que son campos requeridos y me deja hacer el envío:

        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    <strong>Peso:</strong>
                    <input type="text" name="weight" class="form-control" placeholder="peso" required>
                </div>
            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    <strong>Altura:</strong>
                    <input type="text" name="height" class="form-control" placeholder="height" required>
                </div>
            </div>
        </div>

Luego en el botón submit hago esto

$(".btn-submit").click(function(e){


    $('#alert-ok').css('display', 'none');
    $('#error-list').css('display', 'none');

    e.preventDefault();
    ...

Gracias.

2
  • 1
    ¿El envío del formulario lo haces mediante el formulario o mediante código (XHR)? Estás capturando el evento clic del botón, no el envío del formulario, por lo que desaparecen los IDs #alert-ok y #alert-list cuando pulsas el botón independientemente de si el formulario es válido o no. el 3 oct. 2020 a las 15:40
  • Lo más probable es que sea el e.preventDefault(); que estás usando para el botón de submit. Ahora, mi pregunta es ¿Para que lo estás usando? el 3 oct. 2020 a las 15:43

2 respuestas 2

1

Coloca el html de tu boton, recuerda que debe ser el type="submit" y no de tipo button ej:

 <button type="submit" class="btn btn-primary">Enviar</button>

y lo mas importante que tienes que usar en tu script lo siguiente:

 $("form").submit(function(e)
 {
     e.preventDefault();
     $('#alert-ok').css('display', 'none');
     $('#error-list').css('display', 'none'); 
 });

como usas jQuery el metodo de ejecucion debe ser submit en vez de click.

2
  • 1
    Muchas gracias, ahora si me funcionó. 1000 gracias
    – ilernet
    el 4 oct. 2020 a las 18:49
  • 1
    @ilernet, si contestaras a los comentarios te ayudaríamos podríamos ayudarte mejor. Apenas tres minutos después de hacer tu pregunta te hice un comentario explicando el motivo de esta solución. el 5 oct. 2020 a las 5:57
-2

el ejemplo que pusiste ¿esta dentro del form? es que yo lo puse de la siguiente manera

<body>
    <form action="" method="post">
        <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    <strong>Peso:</strong>
                    <input type="text" name="weight" class="form-control" placeholder="peso" required>
                </div>
            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                    <strong>Altura:</strong>
                    <input type="text" name="height" class="form-control" placeholder="height" required>
                </div>
            </div>

            <div class="col-xs-6 col-sm-6 col-md-6">
                <div class="form-group">
                   <button type="submit" class="btn btn-success">Enviar</button>
                </div>
            </div>
        </div>
    </form>
</body>

y por ejemplo cuando intento enviar los campos vacíos me marca que son requeridos introducir la descripción de la imagen aquí

Tu Respuesta

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

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