Formulaire de dialog JQuery avec validation HTML5

Je crée un exemple d’application HTML5 mais je suis coincé avec quelque chose de simple: – / Voici ce que je veux faire:

J’ai un lien qui ouvre une boîte de dialog modale JQuery. Dans cette boîte de dialog, il y a un formulaire (avec 2 champs). Lorsque je clique sur le bouton ‘Envoyer’ (qui est un bouton JQuery … et non un bouton d’envoi), je souhaite déclencher la validation native HTML5. Si la validation est correcte, je souhaite exécuter du code et fermer la boîte de dialog. Si la validation échoue, je souhaite afficher les “astuces” du navigateur et laisser l’utilisateur modifier les valeurs .. comme d’habitude.

Le premier problème était que le bouton ‘Envoyer’ de JQuery n’est pas un bouton de soumission et, en fait, ne déclenche pas la validation HTML5.

J’ai trouvé la solution de contournement sur ce forum: il suffit de déclencher l’événement click (ça marche). Alors maintenant, lorsque je clique sur le bouton “Envoyer”, la validation est déclenchée.

Le deuxième problème est le suivant: comment exécuter un code si la validation est correcte et un autre code si la validation échoue? J’ai trouvé sur le forum la méthode checkValidity() , qui pourrait permettre de tester la validité d’un champ (actuellement opérationnel) ou d’un formulaire … mais je ne peux pas le faire fonctionner sur un object de formulaire. (Erreur: Uncaught TypeError: Object # n’a pas de méthode ‘checkValidity’)

Première question: pourquoi ne puis-je pas appeler checkValidity () sur mon formulaire (j’utilise Chrome 18)

Deuxième question: j’ai créé quelque chose qui fonctionne, mais je suis sûr qu’il existe un meilleur moyen de le faire, car c’est un peu délicat. Pouvez-vous aider à avoir un code plus propre s’il vous plaît?

Voici le code que j’ai fait:

  $("#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 sortinggger html5 validation $('#dialog-form input[type=submit]').click(); } }, Cancel : function() { $(this).dialog('close'); } } });