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?
var disable = $('[data-toggle=collapse]').prop('disabled',true);
? Con ella no hay forma de desplegar el form.$('[data-toggle=collapse]')
, con lo que el formulario no se ocultaría