2

我使用了来自http://struts.jgeppert.com/struts2-jquery-showcase/index.action和http://code.google.com/p/struts2-jquery/wiki/Validation的标准代码片段。

但是客户端和 ajax 服务器端验证不能一起工作。

问题是表单提交不会停止，并且即使我们preventDefault或执行其他任何操作也会调用操作。

<%@ 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>

event.originalEvenet.options.submit = false 如果我们在提交按钮中使用 ajax 验证，即 validate = true，则不会在此处停止，如果我们将其删除，则此方法有效。**

4

1 回答 1

2

好，

我在这里查看了 struts2 jquery 插件代码 o.validate 调用 struts2 中的验证函数，而 o.options.submit 设置为 false 时不会调用实际操作。

现在，如果我的客户端验证也应该能够阻止 ajax 验证。

但是在这里，我无法设置 event.originalEvent.validate = false 因此 ajax 验证总是会发生。

需要某种方式来解决这个问题是本地库有一个用例，其中客户端验证必须能够撤销服务器端验证并避免网络调用。

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;
});
于 2013-09-10T19:04:29.897 回答