I created a form, where I have a SELECT with three options, and when selecting them, jquery displays different form options with their respective contents (there are three DIVs with hide class to hide them). The problem is that when submitting the form, the "required" fields of the other inputs interfere with processing. Could anyone help me to come up with an effective solution, no need to mess up and maintaining the need for client side validation even with javascript disabled?
Here are the codes:
$(function() {
// Formulários
$("#form").change(function() {
var $this, secao, atual, campos, input;
campos = $("div[data-name]");
campos.addClass("hide");
if(this.value !== "") {
secao = $('option[data-section][value="' + this.value + '"]', this).attr("data-section");
atual = campos.filter("[data-name=" + secao + "]");
if(atual.length !== 0) {
atual.removeClass("hide");
}
}
});
var formID = '#' + $('form').data('form-id');
$(formID).submit(function() {
var dados = $(this).serialize();
$('#mensagem')
.fadeIn('slow')
.css('display', 'block')
.addClass('alert alert-light')
.html("<i class='fa fa-spinner fa-pulse fa-fw'></i> Enviando...");
$.ajax({
type : 'POST',
url : '../../mail.php',
data : dados,
dataType: 'json',
success : function(response) {
$('#mensagem')
.css('display', 'block')
.removeClass()
.addClass(response.tipo)
.html('')
.html('' + response.mensagem + '');
}
});
$(this).trigger('reset');
setTimeout(function(){ $("#mensagem").fadeOut('slow'); }, 10000)
return false;
});
});<form method="post" id="form">
<div class="form-group row">
<label for="formSelect" class="col-sm-4 col-form-label"><i>*</i> Formulário</label>
<select class="form-control" name="formSelect" id="formSelect" required>
<option>-- Selecione --</option>
<option data-section="form1" value="form1">Formulário 1</option>
<option data-section="form2" value="form2">Formulário 2</option>
<option data-section="form3" value="form3">Formulário 3</option>
</select>
</div>
<div data-name="form1" class="hide">
<div class="form-group row">
<label for="campo1" class="col-form-label"><i>*</i> Campo 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="campo1" id="campo1" required>
</div>
</div>
<div class="form-group row">
<label for="formMSG" class="col-form-label">Mensagem</label>
<textarea class="form-control" name="formMSG" id="formMSG"></textarea>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-block">Enviar</button>
</div>
</div>
<div data-name="form2" class="hide">
<div class="form-group row">
<label for="campo2" class="col-form-label"><i>*</i> Campo 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="campo2" id="campo2" required>
</div>
</div>
<div class="form-group row">
<label for="formMSG" class="col-form-label">Mensagem</label>
<textarea class="form-control" name="formMSG" id="formMSG"></textarea>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-block">Enviar</button>
</div>
</div>
<div data-name="form3" class="hide">
<div class="form-group row">
<label for="campo3" class="col-form-label"><i>*</i> Campo 1</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="campo3" id="campo3" required>
</div>
</div>
<div class="form-group row">
<label for="formMSG" class="col-form-label">Mensagem</label>
<textarea class="form-control" name="formMSG" id="formMSG"></textarea>
</div>
<div class="form-group row">
<button type="submit" class="btn btn-block">Enviar</button>
</div>
</div>
<div class="row">
<div id="mensagem" class="" role="alert"></div>
</div>
</form>