You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@wicket.apache.org by Hans Lesmeister 2 <ha...@lessy-software.de> on 2013/07/25 09:22:35 UTC
html5-validation and Ajax Form Submit
Hi everybody,
with HTML5 we now have this nice browser built in validation showing a
bubble and a colored outline if a validation on a field does not pass.
However if I add an AjaxSubmitLink to the form, then the html5-validation is
no longer working. I have tried all kind of tricky things with
pre-conditions and other javascript, calling form.checkValidity() manually,
but I am stuck. Either the bubble doesn't show up or the form is
non-ajax-submitted with a full page reload as the consequence.
Does anybody of you got the html5-validation working with an Ajax-Form?
Any help is highly appreciated
-----
--
Regards,
Hans
http://cantaa.de
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/html5-validation-and-Ajax-Form-Submit-tp4660476.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
AW: html5-validation and Ajax Form Submit
Posted by Hans Lesmeister <ha...@lessy-software.de>.
Hi,
I checked that code and I would be eager to use Parsley. Parsley supports the new html5-attributes for validation but does not make use of the native form.checkValidity()-function. For that reason Parsley needs you to set the novalidate-attribute on the form, which suppresses html5-validation so instead, Parsley can jump in.
The trick with the pre-condition does not work. That would be too easy :-)
Although failed validation is suppressing the form-submit, the user feedback (the balloons and colored outlines) do not appear.
What I do now is:
1) set a JQuery trigger on form.submit
2) modify the "click"-event in AjaxFormSubmitBehavior used by AjaxSubmitLink to "myclick"
3) Set a JQuery "click"-event-Trigger on the Submit-Button.
If the users tries to submit the form, following happens:
a) "click"-event on Submit-Button is triggered and calls form.submit() manually
b) The trigger that was set in 1) is executed and manually calls checkValidity() and then preventDefault so no further submission takes place. If Validation was okay (function returns a Boolean) then with JQuery the "myclick"-event is triggered to submit the form with Wicket-Ajax.
c) the form is submitted and everybody is happy :-)
This seems to work but to me it looks very tricky and fragile.
In the mean time I have sent a note to the project team to take a look at Parsley and wicket-parsley integration (fingers crossed...)
-- Cheers, Hans
-----Ursprüngliche Nachricht-----
Von: Martin Grigorov [mailto:mgrigorov@apache.org]
Gesendet: Donnerstag, 25. Juli 2013 15:11
An: users@wicket.apache.org
Betreff: Re: html5-validation and Ajax Form Submit
Hi Hans,
I'm not sure whether you checked the demo code.
See
https://github.com/martin-g/blogs/blob/master/wicket-parsley-validation/src/main/java/com/mycompany/HomePage.java#L71
Maybe you need to do something similar.
On Thu, Jul 25, 2013 at 4:04 PM, Hans Lesmeister 2 < hans.lesmeister@lessy-software.de> wrote:
> Hi Martin,
>
> thank you for the feedback.
>
> What I really mean is the nativ html5-validation. If an input-field
> has the "required"-attribute set and the user leaves the field blank,
> then the browser places an outline around the field and on submit a
> little balloon appears with a text like "Please fill in this field".
> Similar happens on
> email- and other field-types.
>
> If I put an AjaxSubmitLink on the submit-button, then a click on that
> button is catched by Wicket and the form is serialized and send to the
> Wicket-Listener directly, short-cutting the html5-validation.
>
> What I want to achieve is that the normal html5-validation is
> processed and if failed, then the click-trigger should be stopped and
> no submit should take place.
>
> Like I said, this problem only occurs on Ajax-Forms, not on regular
> forms where a normal submit is followed by a page-reload.
>
>
>
> Martin Grigorov-4 wrote
> > I'm not sure what problem you face but you can take a look at
> > http://wicketinaction.com/2013/04/server-and-client-side-validation/
> > (may be broken for few more days until Martijn fix Wordpress). Its
> > code is
> > https://github.com/martin-g/blogs/tree/master/wicket-parsley-validation.
> > And the improved version at:
> > https://github.com/code-troopers/wicket-jsr303-parsley
> >
> >
> > On Thu, Jul 25, 2013 at 10:22 AM, Hans Lesmeister 2 <
>
> > hans.lesmeister@
>
> >> wrote:
> >
> >> Hi everybody,
> >>
> >> with HTML5 we now have this nice browser built in validation
> >> showing a bubble and a colored outline if a validation on a field does not pass.
> >>
> >> However if I add an AjaxSubmitLink to the form, then the
> html5-validation
> >> is
> >> no longer working. I have tried all kind of tricky things with
> >> pre-conditions and other javascript, calling form.checkValidity()
> >> manually, but I am stuck. Either the bubble doesn't show up or the
> >> form is non-ajax-submitted with a full page reload as the
> >> consequence.
> >>
> >> Does anybody of you got the html5-validation working with an Ajax-Form?
> >>
> >> Any help is highly appreciated
> >>
> >>
> >>
> >>
> >> -----
> >> --
> >> Regards,
> >> Hans
> >>
> >> http://cantaa.de
> >>
> >> --
> >> View this message in context:
> >>
> http://apache-wicket.1842946.n4.nabble.com/html5-validation-and-Ajax-F
> orm-Submit-tp4660476.html
> >> Sent from the Users forum mailing list archive at Nabble.com.
> >>
> >> -------------------------------------------------------------------
> >> --
> >> To unsubscribe, e-mail:
>
> > users-unsubscribe@.apache
>
> >> For additional commands, e-mail:
>
> > users-help@.apache
>
> >>
> >>
>
>
>
>
>
> -----
> --
> Regards,
> Hans
>
> http://cantaa.de
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/html5-validation-and-Ajax-F
> orm-Submit-tp4660476p4660484.html Sent from the Users forum mailing
> list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: html5-validation and Ajax Form Submit
Posted by Martin Grigorov <mg...@apache.org>.
Hi Hans,
I'm not sure whether you checked the demo code.
See
https://github.com/martin-g/blogs/blob/master/wicket-parsley-validation/src/main/java/com/mycompany/HomePage.java#L71
Maybe you need to do something similar.
On Thu, Jul 25, 2013 at 4:04 PM, Hans Lesmeister 2 <
hans.lesmeister@lessy-software.de> wrote:
> Hi Martin,
>
> thank you for the feedback.
>
> What I really mean is the nativ html5-validation. If an input-field has the
> "required"-attribute set and the user leaves the field blank, then the
> browser places an outline around the field and on submit a little balloon
> appears with a text like "Please fill in this field". Similar happens on
> email- and other field-types.
>
> If I put an AjaxSubmitLink on the submit-button, then a click on that
> button
> is catched by Wicket and the form is serialized and send to the
> Wicket-Listener directly, short-cutting the html5-validation.
>
> What I want to achieve is that the normal html5-validation is processed and
> if failed, then the click-trigger should be stopped and no submit should
> take place.
>
> Like I said, this problem only occurs on Ajax-Forms, not on regular forms
> where a normal submit is followed by a page-reload.
>
>
>
> Martin Grigorov-4 wrote
> > I'm not sure what problem you face but you can take a look at
> > http://wicketinaction.com/2013/04/server-and-client-side-validation/(may
> > be broken for few more days until Martijn fix Wordpress). Its code is
> > https://github.com/martin-g/blogs/tree/master/wicket-parsley-validation.
> > And the improved version at:
> > https://github.com/code-troopers/wicket-jsr303-parsley
> >
> >
> > On Thu, Jul 25, 2013 at 10:22 AM, Hans Lesmeister 2 <
>
> > hans.lesmeister@
>
> >> wrote:
> >
> >> Hi everybody,
> >>
> >> with HTML5 we now have this nice browser built in validation showing a
> >> bubble and a colored outline if a validation on a field does not pass.
> >>
> >> However if I add an AjaxSubmitLink to the form, then the
> html5-validation
> >> is
> >> no longer working. I have tried all kind of tricky things with
> >> pre-conditions and other javascript, calling form.checkValidity()
> >> manually,
> >> but I am stuck. Either the bubble doesn't show up or the form is
> >> non-ajax-submitted with a full page reload as the consequence.
> >>
> >> Does anybody of you got the html5-validation working with an Ajax-Form?
> >>
> >> Any help is highly appreciated
> >>
> >>
> >>
> >>
> >> -----
> >> --
> >> Regards,
> >> Hans
> >>
> >> http://cantaa.de
> >>
> >> --
> >> View this message in context:
> >>
> http://apache-wicket.1842946.n4.nabble.com/html5-validation-and-Ajax-Form-Submit-tp4660476.html
> >> Sent from the Users forum mailing list archive at Nabble.com.
> >>
> >> ---------------------------------------------------------------------
> >> To unsubscribe, e-mail:
>
> > users-unsubscribe@.apache
>
> >> For additional commands, e-mail:
>
> > users-help@.apache
>
> >>
> >>
>
>
>
>
>
> -----
> --
> Regards,
> Hans
>
> http://cantaa.de
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/html5-validation-and-Ajax-Form-Submit-tp4660476p4660484.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>
Re: html5-validation and Ajax Form Submit
Posted by Hans Lesmeister 2 <ha...@lessy-software.de>.
Hi Martin,
thank you for the feedback.
What I really mean is the nativ html5-validation. If an input-field has the
"required"-attribute set and the user leaves the field blank, then the
browser places an outline around the field and on submit a little balloon
appears with a text like "Please fill in this field". Similar happens on
email- and other field-types.
If I put an AjaxSubmitLink on the submit-button, then a click on that button
is catched by Wicket and the form is serialized and send to the
Wicket-Listener directly, short-cutting the html5-validation.
What I want to achieve is that the normal html5-validation is processed and
if failed, then the click-trigger should be stopped and no submit should
take place.
Like I said, this problem only occurs on Ajax-Forms, not on regular forms
where a normal submit is followed by a page-reload.
Martin Grigorov-4 wrote
> I'm not sure what problem you face but you can take a look at
> http://wicketinaction.com/2013/04/server-and-client-side-validation/ (may
> be broken for few more days until Martijn fix Wordpress). Its code is
> https://github.com/martin-g/blogs/tree/master/wicket-parsley-validation.
> And the improved version at:
> https://github.com/code-troopers/wicket-jsr303-parsley
>
>
> On Thu, Jul 25, 2013 at 10:22 AM, Hans Lesmeister 2 <
> hans.lesmeister@
>> wrote:
>
>> Hi everybody,
>>
>> with HTML5 we now have this nice browser built in validation showing a
>> bubble and a colored outline if a validation on a field does not pass.
>>
>> However if I add an AjaxSubmitLink to the form, then the html5-validation
>> is
>> no longer working. I have tried all kind of tricky things with
>> pre-conditions and other javascript, calling form.checkValidity()
>> manually,
>> but I am stuck. Either the bubble doesn't show up or the form is
>> non-ajax-submitted with a full page reload as the consequence.
>>
>> Does anybody of you got the html5-validation working with an Ajax-Form?
>>
>> Any help is highly appreciated
>>
>>
>>
>>
>> -----
>> --
>> Regards,
>> Hans
>>
>> http://cantaa.de
>>
>> --
>> View this message in context:
>> http://apache-wicket.1842946.n4.nabble.com/html5-validation-and-Ajax-Form-Submit-tp4660476.html
>> Sent from the Users forum mailing list archive at Nabble.com.
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail:
> users-unsubscribe@.apache
>> For additional commands, e-mail:
> users-help@.apache
>>
>>
-----
--
Regards,
Hans
http://cantaa.de
--
View this message in context: http://apache-wicket.1842946.n4.nabble.com/html5-validation-and-Ajax-Form-Submit-tp4660476p4660484.html
Sent from the Users forum mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
For additional commands, e-mail: users-help@wicket.apache.org
Re: html5-validation and Ajax Form Submit
Posted by Martin Grigorov <mg...@apache.org>.
Hi,
I'm not sure what problem you face but you can take a look at
http://wicketinaction.com/2013/04/server-and-client-side-validation/ (may
be broken for few more days until Martijn fix Wordpress). Its code is
https://github.com/martin-g/blogs/tree/master/wicket-parsley-validation.
And the improved version at:
https://github.com/code-troopers/wicket-jsr303-parsley
On Thu, Jul 25, 2013 at 10:22 AM, Hans Lesmeister 2 <
hans.lesmeister@lessy-software.de> wrote:
> Hi everybody,
>
> with HTML5 we now have this nice browser built in validation showing a
> bubble and a colored outline if a validation on a field does not pass.
>
> However if I add an AjaxSubmitLink to the form, then the html5-validation
> is
> no longer working. I have tried all kind of tricky things with
> pre-conditions and other javascript, calling form.checkValidity() manually,
> but I am stuck. Either the bubble doesn't show up or the form is
> non-ajax-submitted with a full page reload as the consequence.
>
> Does anybody of you got the html5-validation working with an Ajax-Form?
>
> Any help is highly appreciated
>
>
>
>
> -----
> --
> Regards,
> Hans
>
> http://cantaa.de
>
> --
> View this message in context:
> http://apache-wicket.1842946.n4.nabble.com/html5-validation-and-Ajax-Form-Submit-tp4660476.html
> Sent from the Users forum mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@wicket.apache.org
> For additional commands, e-mail: users-help@wicket.apache.org
>
>