Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - struts2 jquery ajax and client side validatio not working toghether

0 votes
241 views
in Technique[技术] by (71.8m points)

javascript - struts2 jquery ajax and client side validatio not working toghether

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

                //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: 

' + 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.**

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...