2

我正在创建一个 HTML5 示例应用程序，但我坚持做一些简单的事情：-/ 这是我想做的：

我有一个链接，它打开一个 JQuery 模式对话框。在该对话框中，有一个表单（带有 2 个字段）。当我单击“Envoyer”按钮（这是一个 JQuery 按钮......而不是提交按钮）时，我想触发 HTML5 本机验证。如果验证正常，我想执行一些代码，然后关闭对话框。如果验证失败，我想查看浏览器的“提示”并让用户像往常一样修改值。

第一个问题是 JQuery 的“Envoyer”按钮不是提交按钮，事实上，它不会触发 HTML5 验证。

我在那个论坛上找到了解决方法：只需触发点击事件（它正在工作）。所以现在，当我点击“Envoyer”按钮时，就会触发验证。

第二个问题是：如果验证成功，如何执行一个代码，如果验证失败，如何执行另一个代码？我在论坛上找到了该checkValidity()方法，该方法可以测试字段（实际工作）或表单的有效性......但我无法使其在表单对象上工作。（错误是：Uncaught TypeError: Object #<HTMLDivElement>没有方法'checkValidity'）

第一个问题：为什么我不能在我的表单上调用 checkValidity()（我使用 Chrome 18）

第二个问题：我做了一些有效的东西，但我确信有更好的方法来做到这一点，因为它有点棘手。你能帮忙写一个更干净的代码吗？

这是我完成的代码：

        $("#dialog-form").dialog({
        height : '400',
        width : '400',
        modal : true,
        autoOpen : false,
        //position : 'top',
        overlay : {
            backgroundColor : '#000',
            opacity : 0.5
        },
        buttons : {
            'Envoyer' : function() {

                if ($('#dialog-form input[type=text]')[0].checkValidity()) {
                    // If validation is OK for that field, do the stuff and close the modal dialog
                    MyNotes.notesController.createPendingNote();
                    MyNotes.notesController.resetPendingNote();
                    $(this).dialog('close');
                }
                else {
                    // If validation failed, submit the form
                    // to trigger html5 validation
                    $('#dialog-form input[type=submit]').click();
                }
            },
            Cancel : function() {
                $(this).dialog('close');
            }
        }
    });
4

0 回答 0