im new using this amazing framework https://formvalidation.io/
so i have some issues.
I have a big form where i have a
if i submit the form works great and the select i have to select something
But… if a do something that select disappear and appers an input with the same name and id
i mean…. from select change to input
and thats the problem.
When submit that new input not working
This is the actual code
const fv = FormValidation.formValidation(orderForm, {
fields: {
shipperSuburb: {
validators: {
notEmpty: {
message: 'Por favor ingrea el nombre de la colonia.'
}
}
},
recipientSuburb: {
validators: {
notEmpty: {
message: 'Por favor ingrea el nombre de la colonia.'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5(),
createOrder: new FormValidation.plugins.SubmitButton(),
// Submit the form when all fields are valid
//defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
autoFocus: new FormValidation.plugins.AutoFocus()
}
}).on('core.form.valid', function() {
FormValidation.utils.call(
createOrder()
)
});
This is the select
<div class="mb-3 col-md-6">
<div id="changeShipperSuburb">
<div class="form-floating">
<select class="form-select shipperSuburb" name="shipperSuburb" id="shipperSuburb" required=""><option value="Artesanos">Artesanos</option><option value="Capilla de Jesús">Capilla de Jesús</option><option value="El Santuario">El Santuario</option><option value="Sagrada Familia">Sagrada Familia</option><option value="Otro">Otro</option></select>
<label for="shipperSuburb">Colonia *</label>
</div>
</div>
<div class="fv-plugins-message-container invalid-feedback"></div></div>
If i select “Otro” the select change to an input
<div class="mb-3 col-md-6">
<div id="changeShipperSuburb">
<div class="form-floating">
<input class="form-control" type="text" name="shipperSuburb" placeholder=" " value="">
<label for="shipperSuburb">Colonia *</label>
</div>
</div>
<div class="fv-plugins-message-container invalid-feedback"></div>
</div>
So this line
<div class="fv-plugins-message-container invalid-feedback"></div>
does not disappear
And then when submit this input no validate but i cant continue…
Thank you =D