验证表单的各个部分 [英] Validating sections of a form
问题描述
我已经将表单分解为div，并使用下一步"按钮来购物和隐藏这些部分. 我还使用jQuery Validation Plugin为我完成所有验证.
我需要知道的是如何逐节进行验证.这就是我所拥有的
- 个人信息
- 地址详细信息
- 项目信息
- 条款和条件
2、3和4默认情况下是隐藏的，以使表单不那么令人生畏.
单击个人信息"的下一个按钮将隐藏此div并显示地址详细信息"等.
最后一个屏幕上有提交表单"按钮，该按钮随后将正常验证整个表单，但我需要在用户继续前进之前验证每个部分.
这是我认为应该起作用的:
CSS
.project-address {display:none;}
HTML
<form class="wpcf7">
<div class="project-details">
<h2>Project details</h2>
<label>Project name: </label><input type="text" class="reg-project-name" size="40" value="" name="projectName">
<div class="back-next"><span class="reg-next-button">Next</span></div>
</div>
<div class="project-address">
<h2>Project address</h2>
<label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress">
<div class="back-next"><span class="reg-next-button">Next</span></div>
</div>
</form>
JQUERY
//clicking the next button hides this section and shows the next section
jQuery('.project-details .reg-next-button').click(function() {
// jQuery(".project-details").slideUp();
// jQuery('.project-address').slideDown();
jQuery('.reg-project-name').validate({
debug: true,
rules: {
projectName: "required"
},
messages: {
projectName: "Please give your project a name",
}
});
});
已尝试验证这样的一个元素.
jQuery('.project-details .reg-next-button').click(function() {
// jQuery(".project-details").slideUp();
// jQuery('.project-funding').slideDown();
var validator = jQuery( ".wpcf7-form" ).validate();
validator.element( ".reg-project-name" );
});
如果单击下一步"按钮，则需要在该div中验证表单元素，然后再继续进行操作.即表单元素尚未通过验证.
有什么想法吗? 非常感谢.
首先，忘记将.validate()包装在任何点击处理程序中了……它根本不能那样工作.一个问题是.validate()并不是一种测试"表单有效性的方法.而是.validate()只是用于初始化表单上插件的方法.您将在页面加载后一次进行此操作，因为随后对.validate()的所有调用都将被忽略.
要使用jQuery Validate插件以编程方式测试表单，请使用触发.valid()方法测试并返回布尔值.
当我创建多步骤表单时，我为每个部分使用一组唯一的<form>标签.
然后我使用.valid()测试该部分，然后再进行下一个操作. (别忘了先初始化插件；在DOM上的所有表单上都调用.validate().)
然后在最后一节中，我在每种表单上使用.serialize()并将它们连接到要提交的数据查询字符串中.
类似这样的事情...
$(document).ready(function() {
$('#form1').validate({
// rules
});
$('#form2').validate({
// rules
});
$('#form3').validate({
// rules,
submitHandler: function (form) {
// serialize and join data for all forms
// ajax submit
return false;
}
});
$('#gotoStep2').on('click', function() {
if ($('#form1').valid()) {
// code to reveal step 2
}
});
$('#gotoStep3').on('click', function() {
if ($('#form2').valid()) {
// code to reveal step 3
}
});
// there is no third click handler since the plugin takes care of this with the
// built-in submitHandler callback function on the last form.
});
重要的是要记住我上面的click处理程序没有使用type="submit"按钮.这些是常规按钮，它们是form标签的外部或type="button".
仅最后一个表单上的按钮是常规的type="submit"按钮.那是因为我仅在最后一种形式上利用了插件的内置submitHandler回调函数.
概念验证"演示: http://jsfiddle.net/N9UpD/
另外，请参阅以供参考:
https://stackoverflow.com/a/17975061/594235
I've broken my form up into divs and using Next buttons to shop and hide those sections. I am also using jQuery Validation Plugin to do all the validation for me.
What I need to know is how to validate section by section. So this is what I have
- Personal Information
- Address details
- Project Information
- Terms and conditions
2,3,and 4 are hidden by default to make the form less daunting.
Clicking on the next button of Personal Information will hide this div and show the Address Details and so on.
The very last screen has the submit form button which then would validate the entire form normally but I need to validate each section before the user moves on.
Here's what I thought should have worked:
CSS
.project-address {display:none;}
HTML
<form class="wpcf7">
<div class="project-details">
<h2>Project details</h2>
<label>Project name: </label><input type="text" class="reg-project-name" size="40" value="" name="projectName">
<div class="back-next"><span class="reg-next-button">Next</span></div>
</div>
<div class="project-address">
<h2>Project address</h2>
<label>Project address:</label><input type="text" class="reg-project-address" size="40" value="" name="projectAddress">
<div class="back-next"><span class="reg-next-button">Next</span></div>
</div>
</form>
JQUERY
//clicking the next button hides this section and shows the next section
jQuery('.project-details .reg-next-button').click(function() {
// jQuery(".project-details").slideUp();
// jQuery('.project-address').slideDown();
jQuery('.reg-project-name').validate({
debug: true,
rules: {
projectName: "required"
},
messages: {
projectName: "Please give your project a name",
}
});
});
EDIT: Have tried to validate one element like this.
jQuery('.project-details .reg-next-button').click(function() {
// jQuery(".project-details").slideUp();
// jQuery('.project-funding').slideDown();
var validator = jQuery( ".wpcf7-form" ).validate();
validator.element( ".reg-project-name" );
});
EDIT: If I click on the Next button, I need the form elements to be validated in that div before moving on which is not happening. i.e the form elements are not being validated..
Any thoughts? Many thanks.
Firstly, forget about wrapping .validate() inside of any click handlers... it just doesn't work like that. One issue is that .validate() is not a method for "testing" the form's validity. Rather, .validate() is only the method for initializing the plugin on the form. You would do it once on page load, because any subsequent calls to .validate() are ignored.
To test the form programatically with the jQuery Validate plugin, you use the .valid() method which triggers a test and returns a boolean.
When I create multi-step forms, I use a unique set of <form> tags for each section.
Then I use .valid() to test the section before moving to the next. (Don't forget to first initialize the plugin; call .validate(), on all forms on DOM ready.)
Then on the last section, I use .serialize() on each form and concatenate them into a data query string to be submitted.
Something like this...
$(document).ready(function() {
$('#form1').validate({
// rules
});
$('#form2').validate({
// rules
});
$('#form3').validate({
// rules,
submitHandler: function (form) {
// serialize and join data for all forms
// ajax submit
return false;
}
});
$('#gotoStep2').on('click', function() {
if ($('#form1').valid()) {
// code to reveal step 2
}
});
$('#gotoStep3').on('click', function() {
if ($('#form2').valid()) {
// code to reveal step 3
}
});
// there is no third click handler since the plugin takes care of this with the
// built-in submitHandler callback function on the last form.
});
Important to remember that my click handlers above are not using type="submit" buttons. These are regular buttons, either outside of the form tags or type="button".
Only the button on the very last form is a regular type="submit" button. That is because I am leveraging the plugin's built-in submitHandler callback function on only the very last form.
"Proof of Concept" DEMO: http://jsfiddle.net/N9UpD/
Also, see for reference:
https://stackoverflow.com/a/17975061/594235
这篇关于验证表单的各个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
