I´ve been trying to make this tooltips appear without using js or something else than bootstrap classes and the required attribute. The problem is that my form is using a prevent default function on submit, I mean, the required attribute is working as expected when submiting an empty (and required input), the easse scroll animation an the cursor on the empty field are OK... but the tooltip that says "this field is required" does not appear, it appears only after pressing enter on empty text box in screen... I guess the top scrolling animation to empty fields is ommiting the tooltip but i dont know why is happening.
My form is kind of extense, lot of checkboxes (like 15 with the labels "for" correspondence and the name/id on the input), each of that has a get element by id definiton on the js and 1/0 value trough a checked() validation, same with the file input (10 type files inputs more or less with similar definitons as the checkboxes) and email, names, lastname and other input type text that are minority. Have all tags closed an verified each of one with the correct attributes and classes, so the prevent default function could be responsible, the form tag is correct with the inputs inside. ¿maybe manual options for scroll animation an the tooltip on submit?
<div class="row">
<div class="col-3 d-none d-sm-none d-md-block" style="background-color: #0174bc;">
</div>
<div class="col-sm-12 col-md-9 px-3">
<form id="certification_applicant_form" method="POST" class="was-validated">
<hr>
<!-- <fieldset> -->
<!-- DATOS GENERALES DEL SOLICITANTE -->
<h4 class="text-start">Datos generales</h4><br>
<div class="row my-2">
<div class="col-sm-12 col-md-6 my-2">
<div class="row">
<div class="col-sm-12 col-md-4 my-2">
<label for="applicant_email"><b>*</b>Correo electrónico:</label>
</div>
<div class="col-sm-12 col-md-8 my-2">
<input class="form-control" placeholder="[email protected]" type="email" id="applicant_email" name="applicant_email" required><br>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 my-2">
<div class="row">
<div class="col-sm-12 col-md-4 my-2">
<label for="applicant_name"><b>*</b>Nombre(s):</label>
</div>
<div class="col-sm-12 col-md-8 my-2">
<input class="form-control" placeholder="Nombre(s)" type="text" id="applicant_name" name="applicant_name" required><br>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 my-2">
<div class="row">
<div class="col-sm-12 col-md-4 my-2">
<label for="paternal_surname"><b>*</b>Apellido paterno:</label>
</div>
<div class="col-sm-12 col-md-8 my-2">
<input class="form-control" placeholder="Apellido paterno" type="text" id="paternal_surname" name="paternal_surname" required><br>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 my-2">
<div class="row">
<div class="col-sm-12 col-md-4 my-2">
<label for="maternal_surname"><b>*</b>Apellido materno:</label>
</div>
<div class="col-sm-12 col-md-8 my-2">
<input class="form-control" placeholder="Apellido materno" type="text" id="maternal_surname" name="maternal_surname" required><br>
</div>
</div>
</div>
</div>
<!-- </fieldset> -->
<hr>
<!-- FORMACIÓN ACADÉMICA DEL SOLICITANTE -->
<!-- <fieldset> -->
<div class="row my-2">
<h4 class="text-start">Formación académica del solicitante</h4><br>
<div class="col-sm-12 col-md-6">
<label for="main_degree"><b>*</b>Licenciatura obtenida:</label>
<input class="form-control" placeholder="Licenciatura" type="text" id="main_degree" name="main_degree" required><br>
</div>
<div class="col-12 col-sm-12 col-md-6 ">
<label for="main_degree_license"><b>*</b>Cédula profesional:</label>
<input maxlength="10" class="form-control" placeholder="Máximo 10 caracteres" type="text" id="main_degree_license" name="main_degree_license" required><br>
</div>
</div>
<div class="row my-2">
<p>Rama(s) de la propiedad intelectual en la que se ha desempeñado los últimos 3 años <br>*Marque todas las que apliquen</p><br>
<div class="col-sm-12 col-md-6">
<label for="derechos_autor">
<input class="form-check-input" type="checkbox" name="derechos_autor" id="derechos_autor">
Derechos de autor
</label><br>
<label for="signos_distintivos">
<input class="form-check-input" type="checkbox" name="signos_distintivos" id="signos_distintivos">
Signos distintivos
</label><br>
<label for="invenciones">
<input class="form-check-input" type="checkbox" name="invenciones" id="invenciones">
Invenciones
</label><br>
</div>
<div class="col-sm-12 col-md-6">
<label for="secretos_industriales">
<input class="form-check-input" type="checkbox" id="secretos_industriales">
Secretos Industriales
</label><br>
<label for="litigio">
<input class="form-check-input" type="checkbox" id="litigio">
Litigio de derechos de propiedad intelectual
</label><br>
<label for="otro">
<input class="form-check-input" type="checkbox" id="otro">
Otro:
</label>
<input class="form-control" placeholder="Especifique el ramo" type="text" id="otro_text" name="otro_text" disabled>
</div>
</div>
<!-- <fieldset> -->
<div class="row my-2">
<h4 class="text-start">Manifiesto de miembro activo en AMPPI</h4><br>
<div class="col-9 text-justify">
<label for="verify_active_member">
Solicito verificación por parte de la Gerencia por haber sido miembro del consejo (incluyendo consejo ampliado)
</label><br>
</div>
<div class="col-3 my-auto">
<input class="form-check-input" type="checkbox" id="verify_active_member" name="verify_active_member"></div>
</div>
<div class="row my-2">
<div class="col-9 text-justify">
<label for="active_member_cv_evidence">La evidencia consta en mi CV en extenso</label><br>
</div>
<div class="col-3 my-auto">
<input class="form-check-input" type="checkbox" id="active_member_cv_evidence" name="active_member_cv_evidence">
</div>
</div>
<div class="row my-2">
<div class="col-9">
<label for="active_member_aditional_evidence">Tengo evidencia adicional</label><br>
</div>
<div class="col-3 my-auto">
<input class="form-check-input" type="checkbox" id="active_member_aditional_evidence" name="active_member_aditional_evidence">
</div>
<div id="additional_evidence_div" style="display: none;" class="col-12 my-2 text-center">
<label for="additional_evidence_file">Evidencia adicional:</label>
<input class="form-control" type="file" id="additional_evidence_file" name="additional_evidence_file" accept=".pdf, .jpg, .jpeg, .png"><br>
</div>
</div>
<div class="row text-center mx-2 my-4">
<label for="max_files_link">Si tus archivos sobrepasan el máximo permitido en la plataforma, para las preguntas obligatorias por favor sube un archivo que contenga la liga además de incluirla en esta sección.</label>
<input class="form-control" id="max_files_link" name="max_files_link"><br>
</div>
<!-- </fieldset> -->
<div class="row text-center my-4">
<label for="terms_and_privacy">
<input class="form-check-input" id="terms_and_privacy" type="checkbox" name="terms_and_privacy">
Acepto Reglas de Certificación AMPPI y Aviso de Privacidad<br>
</label>
</div>
<div class="row text-center mx-2 mt-4">
<div class="col-12">
<button class="btn btn-secondary" type="submit">Enviar solicitud</button>
</div>
</div>
</form>