struts2 jquery ajax and client side validatio not working toghether

[GoogleCodeExporter]

(This is for feature requests and bugs in Struts2 jQuery Plugin - for
getting help, please use the User Group.
http://groups.google.com/group/struts2-jquery )

What steps will reproduce the problem?
Details are here 
http://stackoverflow.com/questions/18684370/struts2-jquery-ajax-and-client-side-
validatio-not-working-toghether

What is the expected output? What do you see instead?
Client side and server side validation does not work together.

Which struts2 version?
struts2.3.14.3

Which struts2-jquery plugin version?
3.6

Please provide any additional information below.

Original issue reported on code.google.com by ghotanka...@gmail.com on 8 Sep 2013 at 1:47

[GoogleCodeExporter]

Thanks for filing the issue. 

Original comment by findecli...@gmail.com on 8 Sep 2013 at 1:52

[GoogleCodeExporter]

I saw the comments on 
https://groups.google.com/forum/#!topic/struts2-jquery/dkNnUeoUX3Q - the client 
side validation just works find with xhtml theme and does not work with simple 
theme. Anyways to fix this?

Original comment by findecli...@gmail.com on 9 Sep 2013 at 12:49

[GoogleCodeExporter]

params.beforeSubmit = function(formData, form, formoptions) {

        var orginal = {};
        orginal.formData = formData;
        orginal.form = form;
        orginal.options = formoptions;
        orginal.options.submit = true;

        s2j.publishTopic(elem, always, orginal);

        if (o.onbef) {
            $.each(o.onbef.split(','), function(i, topic) {
                elem.publish(topic, elem, orginal);
            });
        }

        if (o.validate) {
            orginal.options.submit = s2j.validateForm(form, o);
            orginal.formvalidate = orginal.options.submit; 
            if (o.onaftervalidation) {
                $.each(o.onaftervalidation.split(','), function(i, topic) { 
                    elem.publish(topic, elem, orginal);
                });
            }  
        }
        if (orginal.options.submit) {
            s2j.showIndicator(indi);
            if(!o.datatype || o.datatype !== "json") {
                if (o.loadingtext && o.loadingtext !== "false") {
                    $.each(o.targets.split(','), function(i, target) {
                        $(s2j.escId(target)).html(o.loadingtext);
                    });
                }
                else if (s2j.defaults.loadingText !== null) {
                    $.each(o.targets.split(','), function(i, target) {
                        $(s2j.escId(target)).html(s2j.defaults.loadingText);
                    });
                }
            }
        }
        return orginal.options.submit;
    };

    params.success = s2j.pubSuc(elem, always, o.onsuc, indi, 'form', o);
    params.complete = s2j.pubCom(elem, always, o.oncom, o.targets, indi, o);
    params.error = s2j.pubErr(elem, always, o.onerr, o.errortext, 'html');

    $.each(o.formids.split(','), function(i, fid) {
        s2j.log('submit form : ' + fid);
        $(s2j.escId(fid)).ajaxSubmit(params);
    });

    return false;
});

Here we can see o.validate always gets called even when original.options.submit 
is false.

Anyway where we can fix this in such away that onBefore can revoke ajax server 
side validation.

This is natural case, like say my form is empty or some fields are empty that 
we are suppose to check onBeforeTopic then we would not like to have a server 
side ajax call and load the server.

Some complex logic or incase when client side validation is skipped then server 
side ajax validation must run else it must not.

I guess owners of the plugin will suggest some way around.

Also wanted to know if I want to customize the plugin and change this code how 
do I do it? Can I overload it somehow. - You know why I need it now :)

Original comment by ghotanka...@gmail.com on 10 Sep 2013 at 7:09

[GoogleCodeExporter]

Thanks, good findings!

How about changing the if (o.validate) to  

if (o.validate && original.options.submit)

Please owners of plugin let me know how we can change this code and get it 
fixed?

It will be great if we can make this small change on our side itself.

Original comment by findecli...@gmail.com on 10 Sep 2013 at 7:14

[GoogleCodeExporter]

What is 'o' here?

If we can set o.validate = false from before still this must work!

Can we expose o or change o.validate from method of onBeforeTopic? 

Original comment by ghotanka...@gmail.com on 10 Sep 2013 at 7:34

[GoogleCodeExporter]

No, it does not look possible out of box to change 'o' which is 
event.data.validate.

More simpler should be to allow to over-ride 

 /** Helper function to validate Forms */
validateForm : function(form, o)

Function proto-type and do our client side validation here first, if its ok 
then proceed with ajax call else return setting error.

Might look do in design too.

Owners of this plugin must tell me how to over-rider now. I think I have 
reached the deadend now.

Original comment by findecli...@gmail.com on 10 Sep 2013 at 7:58

[GoogleCodeExporter]

If you don't use the Struts2 build in themes xhtml and css_xhtml or the theme 
provided by the Struts2 Bootstrap Plugin you must write your own Handler to 
display the validation handler. There is a sample in the Showcase or you can 
take a look at the Struts2 Bootstrap validation function.

http://code.google.com/p/struts2-bootstrap/source/browse/struts2-bootstrap/strut
s2-bootstrap-plugin/src/main/resources/template/bootstrap/js/validation.js

                <sj:submit 
                    validate="true" 
                    validateFunction="nameOfYourValidationHandlerFunction"
                />

Original comment by johgep on 24 Sep 2013 at 7:49

• Changed state: WontFix
• Added labels: Component-Plugin

[GoogleCodeExporter]

Thanks johgep,

But I think you missed the finding ghotankarua50@gmail.com has found.

In struts/js/struts2/jquery.struts2.js?s2j=3.6.0 inside params.beforeSubmit 
function.

You have if (o.validate) which can't be set false even when client side 
validation shouts error, so every time their is a ajax call.

So Amol is suggestion to replace this condition as if (o.validate && 
orginal.options.submit) 

What is your opinion on the same?

Original comment by findecli...@gmail.com on 26 Sep 2013 at 5:08

[GoogleCodeExporter]

Yes, exactly in file 

http://code.google.com/p/struts2-jquery/source/browse/trunk/struts2-jquery-plugi
n/src/main/resources/template/js/struts2/jquery.struts2.js

on line on 1221

I replaced 

if (o.validate) {

with 

if (o.validate && orginal.options.submit) 

It worked perfectly for me, but I am not sure if johgep will like it?

Original comment by ghotanka...@gmail.com on 26 Sep 2013 at 5:14

[GoogleCodeExporter]

Also I just saw the bootstrap plugin 
http://struts.jgeppert.com/struts2-bootstrap-showcase/validation.action

Its a great plugin, but if we submit form without filling anything in this 
client validation example, it still sends a ajax post call to server.

The post call (copied with parameters so looks like get) is as below 

http://struts.jgeppert.com/struts2-bootstrap-showcase/validation-submit.action?_
_checkbox_agree=true&biograhy=&favourite=&password=&struts.enableJSONValidation=
true&struts.validateOnly=true&user=

We would not like to load the server with this and handle these validation 
checks on client side using java script function itself. Isn't it?

Original comment by ghotanka...@gmail.com on 26 Sep 2013 at 5:28

[GoogleCodeExporter]

I have the same issue and can not implement the client validation as the form 
is always submitted.

I think it is a good feature to returning the original.options.submit could 
prevent further steps.

Please also consider realted requests at 
http://stackoverflow.com/questions/19946043/onsubmit-event-not-working-for-async
hronous-form-submit

Original comment by afattah...@gmail.com on 26 Feb 2014 at 4:21

[GoogleCodeExporter]

You can't reopen the issue so owner has to take it or file a separate issue.

Original comment by gripic...@gmail.com on 26 Feb 2014 at 4:47