struts2 jquery ajax and client side validatio not working toghether

Question

I have used standard code snippet from http://struts.jgeppert.com/struts2-jquery-showcase/index.action and http://code.google.com/p/struts2-jquery/wiki/Validation.

But the client side and ajax server side validations are not working together.

The problem is form submission does not stop and action gets called even if we preventDefault or do anything else.

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true"/>

  </head>
  <body>
        <div id="result">
            <s:actionerror/>
            <s:fielderror fieldName="name" value="eroor"></s:fielderror>
        Submit form bellow.</div>

        <!-- A List for Global Error Messages -->
    <ul id="formerrors" class="errorMessage"></ul>

    <s:form id="formValidateCustom" action="register1.action" namespace="/" theme="simple" cssClass="yform" >
        <fieldset>
            <legend>AJAX Form with Validation</legend>
                <div class="type-text">
                    <label for="echo">User: <span id="loginuserError"></span></label>
                                <sj:textfield id="name" name="name" />
                </div>
                <div class="type-text">
                    <label for="echo">Password: <span id="loginpasswordError"></span></label>
                        <sj:textfield id="password" name="password" />
                </div>
                <div class="type-button">
                        <sj:submit 
                                targets="result" 
                                button="true" 
                                validate="true" 
                                validateFunction="customeValidation"
                                value="Submit" 
                                onBeforeTopics="before"
                                timeout="2500" 
                                indicator="indicator"
                        />
                </div>
        </fieldset>
    </s:form>
        <script type="text/javascript">

        function customeValidation(form, errors) {

                //List for errors
//              alert("in js");
                var list = $('#formerrors');

                //Handle non field errors 
                if (errors.errors) {
                        $.each(errors.errors, function(index, value) { 
                                list.append('<li>'+value+'</li>\n');
                        });
                }

                //Handle field errors 
                if (errors.fieldErrors) {
                        $.each(errors.fieldErrors, function(index, value) { 
                                var elem = $('#'+index);
                                if(elem)
                                {
                                        alert(value[0]);
                                }
                        });
                }
        }
        $.subscribe('before', function(event,data) {
             var fData = event.originalEvent.formData;
             alert('About to submit: \n\n' + fData[0].value + ' to target '+event.originalEvent.options.target+' with timeout '+event.originalEvent.options.timeout );
             var form = event.originalEvent.form[0]; 
             if (form.name.value.length  < 2) { 
                 alert('Please enter a value with min 2 characters');

                 **// the event does not stop here if we use ajax validation i.e validate = true, if we remove it then this works.**
                 event.originalEvent.options.submit = false; 
             } 
            });
    </script>
  </body>
</html>

the event.originalEvenet.options.submit = false does not stop here if we use ajax validation i.e validate = true in submit button, if we remove it then this works.**

Did you check the link above, what exactly is not working there? — Roman C, Sep 09 '13 at 07:35
It seems working as expected, but a few modifications required. Also not sure it's actual code running. — Roman C, Sep 09 '13 at 07:40
@AmolGhotankar And ofcourse it has nothing to talk about a client-side validation. — Roman C, Sep 09 '13 at 07:45
@RomanC - Yes, reach link http://struts.jgeppert.com/struts2-jquery-showcase/index.action. Go to Forms menu and select "Forms with Events" menu. The $.subscribe('before' and — Amol Ghotankar, Sep 09 '13 at 11:48
I saw the comments on https://groups.google.com/forum/#!topic/struts2-jquery/dkNnUeoUX3Q - the client side validation just works fine with xhtml theme and does not work with simple theme. Anyways to fix this? — Amol Ghotankar, Sep 09 '13 at 12:51

score 2 · Accepted Answer · answered Sep 10 '13 at 19:04

Well,

I looked into struts2 jquery plugin code here o.validate calls validate function in struts2 while o.options.submit when set to false does not calls the actual action.

Now if my client side validation is should be able to block ajax validation too.

But here, I am not able to set event.originalEvent.validate = false hence ajax validation will happen always.

Need someway to fix this is native library to have a use case, where client side validation must be able to revoke server side validation and avoid network call.

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;
});

I have exactly the same issue. This seems to be very common usecase when you make some small client side validation and more validations via ajax. I see your implementation at above link. do you find other ways instead of changing the original javascript — Alireza Fattahi, Mar 19 '14 at 12:31

struts2 jquery ajax and client side validatio not working toghether

1 Answers1

Linked