提问人:Israel Ornelas 提问时间:9/12/2023 最后编辑:Israel Ornelas 更新时间:9/15/2023 访问量:26
滚动动画后,提交表单上所需的工具提示不会显示
Required tooltips on submit form does not appear after the scroll animation
问:
我一直在尝试在不使用 js 或引导类和 required 属性以外的其他东西的情况下显示此工具提示。问题是我的表单在提交时使用了防止默认功能,我的意思是,在提交空(和必需的输入)时,required 属性按预期工作,easse scroll 动画和空字段上的光标没问题......但是显示“此字段为必填项”的工具提示没有出现,只有在屏幕上的空白文本框中按Enter键后才会出现...我猜顶部滚动到空字段的动画省略了工具提示,但我不知道为什么会发生这种情况。
我的表单有点扩展,很多复选框(比如 15 个带有标签“for”对应和输入上的名称/id),每个复选框都有一个 get 元素,在 js 上定义 id 和 1/0 值通过 checked() 验证,与文件输入相同(10 个类型文件输入或多或少具有与复选框相似的定义)和电子邮件, 姓名、姓氏和其他少数输入类型的文本。让所有标签都关闭了,并验证了每个标签都具有正确的属性和类,因此 prevent default 函数可以负责,表单标签与内部输入是正确的。¿也许是滚动动画的手动选项和提交时的工具提示?
<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>
答: 暂无答案
评论