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

Question

Welcome To Ask or Share your Answers For Others

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

asked Oct 24, 2021 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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:25:03+0000

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

Categories

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

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

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags