jQuery .show() 调用时弹出 HTML5 表单验证错误答案

【问题标题】：HTML5 form validation error pops up on jQuery .show() calljQuery .show() 调用时弹出 HTML5 表单验证错误
【发布时间】：2013-12-09 05:03:40
【问题描述】：

我正在创建一个多页 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 页的第一个必填字段上弹出。有什么想法吗？

【问题讨论】：

是的，都采用相同的形式。但是不应该只在提交表单时调用验证吗？我还没有提交表格。

标签： javascript jquery html forms validation

【解决方案1】：

将 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 检查是否存在。它不会显示验证弹出窗口，但如果您将放置所需的标签和模式。比用户可见的错误

【讨论】：

这只是一个例子。跟着它。