This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
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 ================================================================================
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?
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 ;)
Why is it ugly?
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.
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?
This seems good.
(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.
Ok, done.
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