I’m creating an HTML5 example application but I’m stuck with something simple :-\/ Here is what I want to do:<\/p>\n
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.<\/p>\n
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.<\/p>\n
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.<\/p>\n
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 First question : Why can’t I call checkValidity() on my form (I use Chrome 18)<\/p>\n 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 ?<\/p>\n Here is the code I’ve done :<\/p>\n Originally posted 2013-11-13 09:48:42. <\/small><\/p>","protected":false},"excerpt":{"rendered":" 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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1348","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1348"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1348\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}checkValidity()<\/code> 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 #<\/code> has no method ‘checkValidity’)<\/p>\n $(\"#dialog-form\").dialog({\n height : '400',\n width : '400',\n modal : true,\n autoOpen : false,\n \/\/position : 'top',\n overlay : {\n backgroundColor : '#000',\n opacity : 0.5\n },\n buttons : {\n 'Envoyer' : function() {\n\n if ($('#dialog-form input[type=text]')[0].checkValidity()) {\n \/\/ If validation is OK for that field, do the stuff and close the modal dialog\n MyNotes.notesController.createPendingNote();\n MyNotes.notesController.resetPendingNote();\n $(this).dialog('close');\n }\n else {\n \/\/ If validation failed, submit the form\n \/\/ to trigger html5 validation\n $('#dialog-form input[type=submit]').click();\n }\n },\n Cancel : function() {\n $(this).dialog('close');\n }\n }\n });\n<\/code><\/pre>\n