JQuery dialog form with HTML5 validation-Collection of common programming errors

I’m creating an HTML5 example application but I’m stuck with something simple :-/ Here is what I want to do:

I have a link, which opens a JQuery modal dialog. On that dialog, there is a form (with 2 fields). When I click on the ‘Envoyer’ button (which is a JQuery button… and not a submit button), I want to trigger HTML5 native validation. If validation is OK, I want to execute some code, and close the dialog. If validation failed, I want to see the browser’s “hints” and let the user modify the values.. as usual.

The first problem was that the JQuery ‘Envoyer’ button is not a submit button and as a mater of fact, doesn’t trigger HTML5 validation.

I found the workaround on that forum : simply trigger the click Event (it’s working). So now, when I click the “Envoyer” button, validation is triggered.

The second problem is: how to execute one code if validation is OK, and another code if validation failed ? I found on the forum the checkValidity() method, which could be able to test the validity of a field (actually working) or of a form… but I can’t make it work on a form object. (Error is : Uncaught TypeError: Object # has no method ‘checkValidity’)

First question : Why can’t I call checkValidity() on my form (I use Chrome 18)

Second question : I have made something that is working, but I’m sure there is better way to do that, because it’s a little bit tricky. Can you help having a cleaner code please ?

Here is the code I’ve done :

        $("#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');
            }
        }
    });

Originally posted 2013-11-13 09:48:42.