滚动动画后,提交表单上所需的工具提示不会显示

Required tooltips on submit form does not appear after the scroll animation

提问人:Israel Ornelas 提问时间:9/12/2023 最后编辑:Israel Ornelas 更新时间:9/15/2023 访问量:26

问:

我一直在尝试在不使用 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>
HTML 表单 getElementByID PreventDefault onSubmit

评论

0赞 Apodemus 9/12/2023
嗨,请将您的尝试代码添加到您的问题中。
0赞 Israel Ornelas 9/15/2023
你去吧,对不起意大利面

答: 暂无答案