問題描述
我使用了來自 http://struts.jgeppert.com 的標準代碼片段/struts2-jquery-showcase/index.action 和 http://code.google.com/p/struts2-jquery/wiki/Validation.
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.
但是客戶端和 ajax 服務(wù)器端驗證不能一起工作.
But the client side and ajax server side validations are not working together.
問題是表單提交不會停止并且即使我們 preventDefault 或執(zhí)行其他任何操作也會調(diào)用操作.
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>
如果我們使用 ajax 驗證，即在提交按鈕中使用 validate = true，則 event.originalEvenet.options.submit = false 不會在此處停止，如果我們將其刪除，則此方法有效.**
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.**
推薦答案
嗯，
我在這里查看了 struts2 jquery 插件代碼 o.validate 調(diào)用 struts2 中的驗證函數(shù)，而 o.options.submit 設(shè)置為 false 時不會調(diào)用實際操作.
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.
現(xiàn)在，如果我的客戶端驗證也應(yīng)該能夠阻止 ajax 驗證.
Now if my client side validation is should be able to block ajax validation too.
但在這里，我無法設(shè)置 event.originalEvent.validate = false 因此 ajax 驗證將始終發(fā)生.
But here, I am not able to set event.originalEvent.validate = false hence ajax validation will happen always.
需要某種方式來解決這個問題，這是一個原生庫，有一個用例，其中客戶端驗證必須能夠撤銷服務(wù)器端驗證并避免網(wǎng)絡(luò)調(diào)用.
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;
});
這篇關(guān)于struts2 jquery ajax 和客戶端驗證不能一起工作的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！