Javascript struts2 jquery ajax和客户端验证无法协同工作
我使用了和中的标准代码段 但是客户端和ajax服务器端验证不能一起工作 问题是表单提交不会停止，即使我们Javascript struts2 jquery ajax和客户端验证无法协同工作,javascript,jquery,validation,struts2,struts2-jquery,Javascript,Jquery,Validation,Struts2,Struts2 Jquery,我使用了和中的标准代码段 但是客户端和ajax服务器端验证不能一起工作 问题是表单提交不会停止，即使我们preventDefault或执行其他操作，也会调用操作 <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="sj" uri="/struts-jquery-tags"%> <html> <head> <sj:head jqueryui="true"/>
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>
提交以下表格。
带有验证的AJAX表单
用户：
密码：
功能自定义（表单、错误）{
//错误列表
//警报（“js”）；
变量列表=$（“#formerrors”）；
//处理非字段错误
if（errors.errors）{
$.each（errors.errors，函数（索引，值）{
list.append（''+value+' \n'）；
});
}
//处理字段错误
if（errors.fieldErrors）{
$.each（errors.fieldErrors，函数（索引，值）{
变量元素=$（“#”+索引）；
if（elem）
{
警报（值[0]）；
}
});
}
}
$.subscribe（'before'，函数（事件、数据）{
var fData=event.originalEvent.formData；
警报（'即将提交：\n\n'+fData[0].value+'到目标'+event.originalEvent.options.target+'，超时'+event.originalEvent.options.timeout）；
var form=event.originalEvent.form[0]；
如果（form.name.value.length<2）{
警报（“请输入至少2个字符的值”）；
**//如果我们使用ajax验证，即validate=true，那么事件不会在此停止，如果我们删除它，那么它就可以工作**
event.originalEvent.options.submit=false；
}
});
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;
});
你检查过上面的链接了吗？到底是什么不起作用？它看起来像预期的那样起作用，但需要一些修改。也不确定它是实际运行的代码。@AmolGhotankar，当然，它不需要讨论客户端验证。@RomanC-是的，请访问链接。转到表单菜单并选择“带有事件的表单”菜单。美元。订阅（“before”和我在上看到的评论-客户端验证只适用于xhtml主题，而不适用于简单主题。不管怎样解决这个问题？我有完全相同的问题。当您通过ajax进行一些小型客户端验证和更多验证时，这似乎是非常常见的用例。我在上面的链接中看到了您的实现。您知道吗你可以找到其他方法，而不是改变原来的javascript