我使用了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,则不会在此处停止,如果我们将其删除则可以使用。**
答案 0 :(得分:2)
那么,
我在这里查看struts2 jquery插件代码o.validate在struts2中调用validate函数,而当设置为false时o.options.submit不调用实际操作。
现在,如果我的客户端验证应该能够阻止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;
});