独立验证表单段 [英] validate form segments independently
问题描述
我有一个很大的表格，我以一种类似向导的方式将其分为四个部分.向导插件(智能向导)具有当前处于活动状态的表单段，而其余3个段隐藏在dom中.
我正在使用jquery validate插件即时验证表单.问题是验证所显示的表单部分.仅当用户移至下一步时，我才希望在表单的该部分上运行验证.
有没有一种方法可以指定一个元素数组来验证是否触发了任何验证插件?
在向导插件的onLeaveStep选项中，我称为validate插件.无论用户单击下一个还是上一个验证，天气都会被触发.
var $myform = $("#registeration");
var validator = $myform.validate({
errorElement: "span",
rules: {
regtype: "required",
firstname: "required",
lastname: "required",
address1: "required",
city: "required",
country: "required",
phone1: "required",
email: {
required: true,
email: true
},
attendees: {
required: true,
digits: true
}
},
messages: {
regtype: "Select an option",
firstname: "Enter your first name",
lastname: "Enter your last name",
address1: "Enter your address",
city: "Enter your city",
country: "Enter your country",
phone1: "Enter your phone number",
email: "Enter your e-mail",
attendees: "Enter number of persons attending (including yourself)"
}
});
// Initialize Smart Wizard
$('#wizard').smartWizard({
transitionEffect:'slide',
hideButtonsOnDisabled:true,
transitionEffect: 'fade',
onLeaveStep: function(){
if(validator.form()){
//$myform.trigger('submit');
return true;
}else{
return false;
}
}
});
引用OP:
在向导插件的onLeaveStep选项中，我调用了validate插件.用户是否单击
next或previous验证将被触发"
问题在于，.validate()不是用于测试"表单有效性的方法.而是.validate()是用于初始化表单上插件的方法.您将在页面加载时一次进行此操作，随后对.validate()的所有调用都将被忽略.
要使用jQuery Validate插件以编程方式测试表单，请使用 .valid()方法，该触发器会触发测试并返回一个布尔值.
默认情况下，jQuery Validate插件还将忽略任何隐藏"的输入元素.因此，也许在使用向导插件时可以利用此功能来发挥自己的优势.
在您的DOM就绪处理程序中...
$('#myform').validate({
// rules & options
});
在您的向导中...
onLeaveStep: function(){
$('#myform').valid();
}
否则，当我创建多步骤表单时，我为每个部分使用一组唯一的form标记.然后，我将使用.valid()测试该部分，然后再继续进行下一个操作. (别忘了首先在页面完全加载后初始化插件，在每个表单上调用.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.
});
I have a very big form which I am splitting across four segments in a wizard like way. The wizard plugin (smart wizard) has the form segment currently in focus avtive while the remaining 3 segments are hidden in the dom.
I am using the jquery validate plugin to validate the form on the fly. The problem is validating that part of the form which is shown. Only when the user moves to the next step I want to run validation on that part of the form.
Is there a way to specify an array of elements to validate any the validation plugin is triggered ?
In the onLeaveStep option of the wizard plugin, I called the validate plugin. Weather or not the user clicks next or previous validation will be triggered.
var $myform = $("#registeration");
var validator = $myform.validate({
errorElement: "span",
rules: {
regtype: "required",
firstname: "required",
lastname: "required",
address1: "required",
city: "required",
country: "required",
phone1: "required",
email: {
required: true,
email: true
},
attendees: {
required: true,
digits: true
}
},
messages: {
regtype: "Select an option",
firstname: "Enter your first name",
lastname: "Enter your last name",
address1: "Enter your address",
city: "Enter your city",
country: "Enter your country",
phone1: "Enter your phone number",
email: "Enter your e-mail",
attendees: "Enter number of persons attending (including yourself)"
}
});
// Initialize Smart Wizard
$('#wizard').smartWizard({
transitionEffect:'slide',
hideButtonsOnDisabled:true,
transitionEffect: 'fade',
onLeaveStep: function(){
if(validator.form()){
//$myform.trigger('submit');
return true;
}else{
return false;
}
}
});
Quote OP:
"In the onLeaveStep option of the wizard plugin, I called the validate plugin. Wether or not the user clicks
nextorpreviousvalidation will be triggered"
The problem is that .validate() is not a method for "testing" the form's validity. Rather, .validate() is the method for initializing the plugin on the form. You would do it once on page load and 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.
The jQuery Validate plugin, by default, will also ignore any "hidden" input elements. So perhaps you can leverage this feature to your advantage when using your wizard plugin.
within your DOM ready handler...
$('#myform').validate({
// rules & options
});
within your wizard...
onLeaveStep: function(){
$('#myform').valid();
}
Otherwise, 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 each form when the page is fully loaded.) Then on the last section, I use .serialize() on all sections and concatenate each 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.
});
这篇关于独立验证表单段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
