0
Within a single form
I have 3 divs
, that change as the user clicks on próximo
. But for the user to be able to click próximo
the mandatory fields of div
which is currently being shown must be filled.
To validate the form
has a code as follows:
var form_validation = function() {
var e = function() {
jQuery(".form-valide").validate({
ignore: [],
errorClass: "invalid-feedback animated fadeInDown",
errorElement: "div",
errorPlacement: function(e, a) {
jQuery(a).parents(".form-group > div").append(e)
},
highlight: function(e) {
jQuery(e).closest(".form-group").removeClass("is-invalid").addClass("is-invalid")
},
success: function(e) {
jQuery(e).closest(".form-group").removeClass("is-invalid"), jQuery(e).remove()
},
rules: {
"nome_campo":{
required: !0
}
},
messages:{
"nome_campo":{
required: "mensagem a ser mostrada quando não preenchido"
}
}
})
}
return {
init: function() {
e(), a(), jQuery(".js-select2").on("change", function() {
jQuery(this).valid()
})
}
}
}();
jQuery(function() {
form_validation.init()
});
This way I can specify the field that is required and the error message to be shown. But as far as I’ve researched I can only do this to tag form
, but not to div
.
I was wondering if there’s any way to do something similar for the divs
and only allow to pass to the next div
when all mandatory fields are completed and so on until you reach the div
that allows you to click on salvar
. But if the user clicks próximo
and the required fields are not populated showing the error messages.
I could try to help if I could reproduce the code, and for that I would need the form HTML.
– Sam
I will try to put here, the complicated code that is the company I do internship, there is not to show much. I will change some things in it and already put. Vlwzaço!
– Shinforinpola