[英]Validate two forms when one's submission depends on the other
我正在从事这个项目,并且无法进行表单验证。 我有两种形式,即X形式和Y形式,我想使用jQuery验证插件来实现客户端验证。 这是我第一次使用此插件,因此,如果我的问题很初级,我会向您道歉。 我已经设置了表格,以便用户必须同时填写表格X和表格Y才能以这两个表格提交数据。 完成后,作为成功响应的结果,将通过Ajax提交表格X,并提交表格Y。 提交过程运行良好,所有数据均完美发送。 但是,我无法进行验证。 我浏览了文档和多个论坛,但未能找到有效的解决方案。 任何建议或相关文献的链接将不胜感激。 这是相关的javascript和html:
<script>
$("#formYsubmit").click(function(e){
e.preventDefault();
$.ajax({
url: "the resulting page",
type: "POST",
data: formXdata,
error: function(resp) {
console.log(resp);
},
success: function(resp) {
$("#formY").submit();
}
});
$(this).disabled=true;
$(this).val()="Sending..."
return false;
});
$('#formX').validate({
rules: {
email: {
required: true,
email: true
},
password: {
minlength: 6,
required: true
},
full_name: {
required: true
},
site_address: {
minlength: 5,
},
phone: {
minlength: 10,
phoneRegex: true
}
},
messages: {
email: "Please enter a valid email address",
site_address: "Please enter your website name",
full_name: "Please enter your name",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters long"
},
phone: "Please enter a valid phone number",
email: "Please enter a valid email address"
},
highlight: function(label) {
$(input).closest('.control-group').addClass('error');
},
success: function(label) {
label.text('OK!').addClass('valid');
}
});
$('#formY').validate({
rules: {
plan_input: {
required: true,
},
fieldA: {
required: true
},
fieldB: {
required: true
},
fieldC: {
required: true
},
},
highlight: function(label) {
$(input).addClass('error');
},
success: function(label) {
label.text('OK!').addClass('valid');
}
});
</script>
<form id="formX" style="float:left; width:40%;" method="post">
<div class="control-group">
<div class="controls">
<input id="full_name" name="full_name" placeholder="Full Name" type="text" />
</div>
<label class="error"></label>
</div>
<div class="control-group">
<div class="controls">
<input class="required" id="email" maxlength="75" name="email" placeholder="Email ID" type="text" />
</div>
</div>
<div class="control-group">
<div class="controls">
<input class="required" id="password" name="password" placeholder="Password" type="password" />
</div>
<label class="error"></label>
</div>
<div class="control-group">
<div class="controls">
<input id="site_address" name="site_address" placeholder="Website" type="text" />
</div>
<label class="error"></label>
</div>
<div class="control-group">
<div class="controls">
<input id="phone" maxlength="25" name="phone" placeholder="Phone" type="text" />
</div>
<label class="error"></label>
</div>
</form>
<div id="frontServerErrorContainer"></div>
<form id="formY" style="float:left;width:40%;" method="post" action="">
<select name="plan_input" class="field" id="plan-select" disabled>
<option value="">Choose Plan</option>
<option value="1">Option A</option>
<option value="2">Option B</option>
<option value="3">Option C</option>
</select>
<div id="serverErrorContainer2"></div>
<div id="errorContainer2"><ul id="errorContainer2"></ul></div>
<div class="sh form-field cl-div control-group" >
<input type='text' class="field" name='fieldA' value="" placeholder="fieldA" id="fieldA">
</div>
<div class="sh form-field cl-div control-group" >
<input type='text' class="field" name='fieldB' value="" placeholder="fieldB" id="fieldB">
</div>
<div class="sh form-field cl-div control-group" >
<input type='text' class="field" name='fieldC' value="" placeholder="fieldC" id="fieldC">
</div>
<button class="bootstrapbtn bootstrapbtn-primary" id="formYsubmit">Submit</button>
</form>
对于很长的代码段,或者如果这个问题太基础,我深表歉意。 谢谢!
您的ajax
属于Validate插件的submitHandler
回调内部。 您还需要将所有内容包装在DOM ready处理函数内,以确保在调用.validate()
时HTML存在。 您不需要.validate()
之外的任何ajax
,也不需要任何其他click
处理程序。
<script>
$(document).ready(function() {
$('#formX').validate({
// rules & options here
});
$('#formY').validate({
// rules & options here,
submitHandler: function(form) {
// only fires when form is valid
$("#formYsubmit").disabled=true;
$("#formYsubmit").val()="Sending..."
form.serialize();
// your ajax here
return false; // prevent the regular form submit when using ajax
}
});
});
</script>
文档 : http : //jqueryvalidation.org/validate/
SubmitHandler (默认值:本机表单提交)
类型:Function()
表单有效时用于处理实际提交的回调。 获取表单作为唯一参数。 替换默认的提交。 验证后通过Ajax提交表单的正确位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.