验证两种形式，当一个人提出要看其他 [英] Validate two forms when one's submission depends on the other
问题描述
我在做这个项目，我越来越坚持表单验证。我有两种形式，X型和形式Y和我想使用jQuery的验证插件来实现客户端验证。这是我第一次使用这个插件，所以我提前道歉，如果我的问题似乎简陋。 我已经成立了形式，使用户必须填写在形式X和形式Y的数据提交两种形式。一旦做到这一点，X型，通过Ajax的提交和Form Y被提交成功响应的结果。提交过程工作正常，所有的数据通过完美的发送。但是，我不能得到验证工作。我已经通过的文件和多个论坛钻研，但一直没能找到工作的解决方案。任何建议或链接到相关文献将大大AP preciated。以下是有关JavaScript和HTML：
I'm working on this project and am getting stuck with form validation. I have two forms, Form X and Form Y and I wanna use the jQuery validation plugin to implement client-side validation. This is my first time using this plugin, so I apologize in advance if my questions seem rudimentary. I've set up the forms so that the user has to fill in both Form X and Form Y to submit the data in both forms. Once that is done, Form X is submitted through Ajax and Form Y is submitted as a result of a success response. The submission process works fine and all the data is sent through perfectly. However, I cannot get validation to work. I've pored through the documentation and multiple forums but have not been able to find a working solution. Any suggestions or links to relevant literature would be greatly appreciated. Here's the relevant javascript and 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>
我为code极长的片段道歉，如果这个问题太初级了。谢谢！
I apologize for the extremely long snippet of code or if this question is too elementary. Thank you!
推荐答案
您 AJAX 所属的 submitHandler 回调里面的验证插件。您还需要包装的一切一个DOM准备好处理程序函数中，确保HTML时存在 .validate（）被调用。你不应该需要任何 AJAX .validate（）之外，也不应该需要任何额外的点击处理程序。
Your ajax belongs inside the submitHandler callback of the Validate plugin. You also need to wrap everything inside a DOM ready hander function to ensure the HTML exists when .validate() is called. You should not need any ajax outside of .validate(), nor should you need any additional click handlers.
<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提交表单它验证后。
submitHandler (default: native form submit)
Type: Function()
Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.
这篇关于验证两种形式，当一个人提出要看其他的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
