0

Tengo un código, está acá: https://jsfiddle.net/mca_mac/onmvkj5f/
Es un simple formulario asociado a un botón con el evento collapse:

    <div class="container-fluid">
        <div class="row mt-3 ml-4">
            <div class="col-8">
                <button class="btn btn-lg btn-secondary btn-block my-2" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">FORM</button>

                    <div class="form-group collapse" id="multiCollapseExample1">
                    <form action="">

                        <label for="name">Name</label>
                        <input type="text" class="form-control" placeholder="Name" name="name" id="name">
                        <div class="invalid-feedback">Please enter your name</div>

                        <label for="email">Email</label>
                        <input type="email" class="form-control" placeholder="email" name="email" id="email">
                        <div class="invalid-feedback">Please enter your email</div>

                        <label for="message">Message</label>
                        <textarea name="message" id="message" class="form-control"></textarea>

                        <label for="occupation">Occupation</label>
                        <select name="occupation" id="occupation" class="form-control">
                            <option value="student">Mexico</option>
                            <option value="executive">España</option>
                            <option value="other">Colombia</option>
                        </select>

                        <button class="btn btn-primary"  name="sendForm" id="sendForm" type="submit">Send</button>
                        <div class="txt"></div>

                    </form>
                </div>

            </div>
        </div>
    </div>

Para hacer la validación ocupé esto:

$(document).ready(function(){
    var enable = $('[data-toggle=collapse]').prop('enable',true);
    var disable = $('[data-toggle=collapse]').prop('disabled',true);
    $('#sendForm').on('click', function() {
        var fName = $("input[type=text][name=name]").val().length;
        var fEmail = $("input[type=text][name=email").val();
        var fTxt = [];

        valid = true;

        $("#name").removeClass("is-invalid");
        $("#email").removeClass("is-invalid");
        $('.txt').empty();

        if (fName < 2) {
            $("#name").addClass("is-invalid");
            valid = false;
        }

        if (fEmail.indexOf('@', 0) == -1 || fEmail.indexOf('.', 0) == -1) {
            $("#email").addClass("is-invalid");
            valid = false;
        }

        return valid;

    });
});

Necesito deshabilitar el evento collapse hasta validar correctamente el formulario (si no lo hago, durante cada validación el formulario se oculta). Para eso ocupé esta función:

$('#multiCollapseExample1').on('shown.bs.collapse', function () {
    disable;
});   

y necesito demorar el evento collapse durante el envío, para mostrale al usuario un mensaje de éxito en el envío, y asegurarme de que la información ha sido enviada.

$('#multiCollapseExample1').on('shown.bs.collapse', function () {
    $(".txt").push('Form send!');
    enable.delay(2000);
});  

Lamentablemente no funciona el código y el formulario no se despliega. Alguien me podría ayudar?

2
  • 1
    ¿Para qué tienes esta línea var disable = $('[data-toggle=collapse]').prop('disabled',true);? Con ella no hay forma de desplegar el form.
    – Kiko_L
    Commented el 5 feb. 2019 a las 15:30
  • Si puedo entender, lo que hace esa línea es deshabilitar(disabled) el efecto collapse $('[data-toggle=collapse]'), con lo que el formulario no se ocultaría
    – mau mca
    Commented el 5 feb. 2019 a las 15:43

1 respuesta 1

1

Te dejo un ejemplo de como puedes hacerlo, está todo comentado para que se entienda.

$(document).ready(function() {
   // No existe la propiedad “enable” que usabas. La vamos a reemplazar por “disabled”.
   /* No existe la propiedad “enable” que usabas. La vamos a reemplazar por “disabled”.*/
   
   $('#multiCollapseExample1').on('shown.bs.collapse', function () {
            $('[data-toggle=collapse]').prop('disabled',true);
    });
    /* Vamos a capturar el submit de nuestro form*/
    $("#myForm").on("submit", function(e){
        e.preventDefault(); // vamos a evitar que lo envíe.
        
        /*
            resto del codigo...
            Las validaciones usadas son las basicas de HTML5.
            Por lo que con agregar "required a tu input lo puedes lograr facilmente.
            Pero si deseas hacer validaciones personalizadas las debes agregar aqui. 
            
        */
        
        //Validacion === true
        // entonces envio el form.
        
        $('[data-toggle=collapse]').prop('disabled',false);
        $('[data-toggle=collapse]').click();
        $(".txt").html(
        `
        <div class="alert alert-success" role="alert">
          Form send!
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
        </div>
        `);
    });
    
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container-fluid">
  <div class="row mt-3 ml-4">
    <div class="col-8">
      <button class="btn btn-lg btn-secondary btn-block my-2" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">FORM</button>
      <div class="form-group collapse" id="multiCollapseExample1">
        <form action="#" id="myForm">

          <label for="name">Name</label>
          <input type="text" class="form-control" placeholder="Name" name="name" id="name" required>
          <div class="invalid-feedback">Please enter your name</div>

          <label for="email">Email</label>
          <input type="email" class="form-control" placeholder="email" name="email" id="email" required>
          <div class="invalid-feedback">Please enter your email</div>

          <label for="message">Message</label>
          <textarea name="message" id="message" class="form-control"></textarea>

          <label for="occupation">Occupation</label>
          <select name="occupation" id="occupation" class="form-control">
            <option value="student">student</option>
            <option value="executive">executive</option>
            <option value="other">other</option>
          </select>

          <button class="btn btn-primary" name="sendForm" id="sendForm" type="submit">Send</button>
          

        </form>
      </div>
       <div class="txt"></div>
    </div>
  </div>
</div>

Editado: te dejo el jsfiddle que me dejaste en los comentarios editado y corregido. Estaba mal tu regex, por otro lado debías sacar el div .text de tu collapse sino no lo vas a ver, no habías declarado "valid" y estabas ejecutado el success fuera de tu evento submit.

HTML

<div class="container-fluid">
    <div class="row mt-3 ml-4">
        <div class="col-8">
            <button class="btn btn-lg btn-secondary btn-block my-2" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1">FORM</button>
            <div class="form-group collapse" id="multiCollapseExample1">
                <form action="" id="myForm">

                    <label for="name">Name</label>
                    <input type="text" class="form-control" placeholder="Name" name="name" id="name">
                    <div class="invalid-feedback">Please enter your name</div>

                    <label for="email">Email</label>
                    <input type="email" class="form-control" placeholder="email" name="email" id="email">
                    <div class="invalid-feedback">Please enter your email</div>

                    <label for="message">Message</label>
                    <textarea name="message" id="message" class="form-control"></textarea>

                    <label for="occupation">Occupation</label>
                    <select name="occupation" id="occupation" class="form-control">
                        <option value="student">Mexico</option>
                        <option value="executive">España</option>
                        <option value="other">Colombia</option>
                    </select>

                    <button class="btn btn-primary"  name="sendForm" id="sendForm" type="submit">Send</button>


                </form>
            </div>
            <div class="txt" role="alert"></div>
        </div>
    </div>
</div>

JS:

$(document).ready(function(){
        $('#multiCollapseExample1').on('shown.bs.collapse', function () {
            $('[data-toggle=collapse]').prop('disabled',true);
        });
        $("#myForm").on("submit", function(e){
            e.preventDefault();
            var nameVal = $("input[type=text][name=name]").val();
            var emailVal = $("input[type=text][name=email").val();
            var  valid = true;

        $("#name").removeClass("is-invalid");
        $("#email").removeClass("is-invalid");
        //$('.txt').empty();
        if ((nameVal).length < 2) {
            $("#name").addClass("is-invalid");
            valid = false;
        }
        if (
/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(emailVal)) {
            $("#email").addClass("is-invalid");
            valid = false;
        }


        if(valid){
        $('[data-toggle=collapse]').prop('disabled',false);
        $('[data-toggle=collapse]').click();
        $(".txt").addClass("alert alert-success");
        $(".txt").html('Form SEND!');
        }

    });

});
3
  • Lo intenté acá: jsfiddle.net/mca_mac/jafL4rv1 pero no realiza bien la validación de mail y la consola muestra este error ReferenceError: valid is not defined
    – mau mca
    Commented el 5 feb. 2019 a las 20:44
  • @maumca te dejo corregido en la pregunta. Arriba te explico los errores que encontré. Saludos
    – Fran Islas
    Commented el 5 feb. 2019 a las 23:02
  • Yo pensé que el success era equivalente a retornar "valid". Muchas gracias @Fran Islas, ahora funciona bien.
    – mau mca
    Commented el 6 feb. 2019 a las 2:08

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.