17826 2012-07-18 06:56:01 +0000 Triggering contextual error message for inputs 2013-10-03 21:59:32 +0000 1 1 1 Unclassified WHATWG HTML unspecified Other other RESOLVED FIXED P3 enhancement 2013 Q4 1 contributor ian annevk darin dglazkov ian james micdesim michelangelo mike mounir ojan roc tkent travil xaviermd zcorpan contributor oldest_to_newest 70122 0 contributor 2012-07-18 06:56:01 +0000 This was was cloned from bug 16051 as part of operation convergence. Originally filed: 2012-02-21 08:18:00 +0000 Original reporter: Xavier Mouton-Dubosc <xaviermd@gmail.com> ================================================================================ #0 Xavier Mouton-Dubosc 2012-02-21 08:18:08 +0000 -------------------------------------------------------------------------------- Hi everyone I'm actually dev'ing on a intranet application in HTML5 with XHR (so sorry, but i can't give access to any example). You can see a test there : http://jsfiddle.net/bz88V/ For a <form> I wish on make an XHR, I test the validity of the form, like this : if (form.checkValidity()) { $.post([...]); } else { errormessages(); } on the same way, into the return of the post (the [...] part), i can have error validating messages from the server. So I attach them to the inpts like this : input.setCustomValidity(le_error_message); le_error_message is really attached as I can see into input.validationMessage the :invalid css selector is set to the input but... How can I trigger the browser (firefox, chrome, etc...) to display their standard contextual error-message ? I tried form.submit(), but it will really submit the form, even skipping what I wish the browser should do. I can't see any reference to that, nor into inspecting <input> and <form> elements. French speaking paper http://dascritch.net/post/2012/02/21/Validations-complexes-de-HTML5-farcies-au-Javascript Sorry my french. Xavier Mouton-Dubosc http://Dascritch.com @dascritch ================================================================================ 74562 1 ian 2012-09-26 18:34:37 +0000 Just catch the form submission using a regular submit button, as in: <form action="javascript:void(0)" onsubmit="submitted()"> ...or some such, instead of doing the submission yourself with checkValidity(), etc. Does that work? 76900 2 xaviermd 2012-10-22 12:09:26 +0000 Sorry to not have answered in time. I did it by not using the async mode of $.post in jquery, then fallback to the normal event to have the form failing. The code became if (form.checkValidity()) { $.ajax({ async : false }); // populating the returned errors into custom validity } return true; BTW, using javascript: link or on*="" attribute is really ugly ;) 76919 3 ian 2012-10-22 18:37:25 +0000 Why is it ugly? 78725 4 ian 2012-11-24 04:21:10 +0000 This bug is not the only request I've seen for a way to explicitly trigger the user agent's form validation UI. Maybe we should add something after all. 94196 5 ian 2013-10-02 20:08:57 +0000 I'm thinking we should supplement every checkValidity() method with a reportValidity() method. On the <form> element it would be the same as checkValidity() except for invoking "interactively validate the constraints" rather than "statically validate the constraints". On form controls, it would do the same but only looking at that one form control. Any objections? 94197 6 xaviermd 2013-10-02 20:20:27 +0000 This seems good. 94228 7 tkent 2013-10-03 14:05:59 +0000 (In reply to Ian 'Hixie' Hickson from comment #5) > I'm thinking we should supplement every checkValidity() method with a > reportValidity() method. On the <form> element it would be the same as > checkValidity() except for invoking "interactively validate the constraints" > rather than "statically validate the constraints". On form controls, it > would do the same but only looking at that one form control. It sounds good. We'd like to implement it in Blink. 94279 8 ian 2013-10-03 21:59:25 +0000 Ok, done. 94280 9 contributor 2013-10-03 21:59:32 +0000 Checked in as WHATWG revision r8210. Check-in comment: Add reportValidity(), which is like checkValidity() but triggers the browser's error-reporting UI as well http://html5.org/tools/web-apps-tracker?from=8209&to=8210