Question

我使用ajax来调用插入和更新，因此有插入/更新按钮而不是提交按钮（输入类型=“提交”）。实际上，我正在使用AngularJS，但即使我只是使用javaScript / ajax，问题也是一样的。问题是，当我执行此javaScript代码以编程方式提交表单（见下文）时，HTML5验证错误不会显示给用户。 HTML5验证错误似乎只在实际点击提交按钮时显示（正如我在帖子中看到的那样，也为我自己验证）。

document.myform.submit();

经过多方努力，我终于找到了一个适合我的简单/直接解决方案，所以我想分享它。我所做的是有插入和更新javaScript函数检查表单的有效性：如果表单有效，继续ajax调用插入或更新;否则，在隐藏的提交按钮上触发click事件（输入类型=“提交”）。

这是我的解决方案代码。如果有人有任何建议或意见，请告诉我。

<!DOCTYPE html>
<html>
    <body>
        <form  id="personForm" name="personForm">
            Name:
            <input type="text" name="Name" id="Name" 
                         placeholder="Name" required /> &nbsp;
            Age:
            <input type="number" name="Age" id="Age"  
                         placeholder="Age" required /> &nbsp;

            <input type="button" value="update" onclick="doUpdate();"/>
            <input type="button" value="insert" onclick="doInsert();"/>

            <!-- hidden submit button -->
            <div style="display:none;">
                <input type="submit" id="submitButton"/>
            </div>

            <script>
                function $(element) {
                    return document.getElementById(element);
                }

                function doUpdate() {

                    // if form is invalid...
                    if (!$("personForm").checkValidity()) { 

                        // auto click the submit button which is the only 
                        // way to get html5 show validation errors to user.
                        // Due to errors, it will not actually submit.
                        $("submitButton").click(); 

                     } else {
                        alert("make ajax call for update");
                    }
                }

                function doInsert() {

                    // if form is invalid...
                    if (!$("personForm").checkValidity()) { 

                        // auto click the submit button which is the only 
                        // way to get html5 show validation errors to user.
                        // Due to errors, it will not actually submit.
                        $("submitButton").click(); 

                    } else {
                        alert("make ajax call for insert");
                    }
                }

            </script>
        </form>
    </body>
</html>

如何在不让用户单击提交按钮的情况下制作HTML5显示验证错误？

0 个答案: