jQuery.show(）调用中弹出HTML5表单验证错误

HTML5 form validation error pops up on jQuery .show() call

本文关键字：HTML5 表单 验证 错误 show 调用 jQuery      更新时间：2024-05-29

我正在创建一个多页HTML5表单。表单的每个"页面"都在一个div中，当单击相应的BUTTON元素时，该div由jQuery.hide（）或.show（）调用隐藏/显示。

问题是：当显示后续页面时，验证检查似乎会自动调用，并且在用户有机会做任何事情之前，错误消息会立即弹出到必填字段。是什么意外触发了表单验证调用吗？

简单示例：

<div class="page" id="page_1" style="display:block;">
    <input type="text" name="first_name" required>
    <button onclick="$('#page_1').hide(); $('#page_2').show();">Next</button>
</div>
<div class="page" id="page_2" style="display:none;">
    <input type="text" name="last_name" required>
</div>

当隐藏第1页并显示第2页时，验证错误会立即出现在第2页的第一个必填字段上。有什么想法吗？

在所有输入标记上设置checkValidity函数。我最近做过。

                function nextDiv(){
                var a = document.getElementById('ONE').checkValidity();
                var b = document.getElementById('TWO').checkValidity();
                var c = document.getElementById('THREE').checkValidity();
                var d = document.getElementById('FOUR').checkValidity();
                var e = document.getElementById('FIVE').checkValidity();
                var f = document.getElementById('SIX').checkValidity();
                var g = document.getElementById('SIX').value;
                er = document.getElementById("ERROR");
                var email = document.getElementById('ONE').value;
                var ec = checkEmail(email);
                var cp = checkPassword();
                if(a == 1 && b == 1 && c == 1 && d == 1 && e == 1 && f == 1 && g!=0 && ec == 'true' && cp ==1){
                    $("#div_1").slideLeftHide();
                    $("#div_2").delay(1100).slideRightShow();
                    er.style.visibility = "hidden";
                }else{
                    er.style.visibility = "visible";
                }
            }

这将返回布尔值，并使用javascript if else进行检查。它不会显示验证弹出窗口，但如果你将放入所需的标签和模式。则用户将看到错误

相关文章：