Question

我正在创建一个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');
            }
        }
    });

带有HTML5验证的JQuery对话框表单

0 个答案: