我的CakePHP应用程序（2.5.4）中有一个webform，我正在使用jQuery-steps （1.1.0）和jQuery Validate插件（1.13.1）使其成为多步形式。
一切似乎进展顺利，但表格尚未提交。有没有人知道如何让它工作？据我所知，我最终进入onFinished事件。
这是我的观点文件：
<div class="col-lg-11 col-md-10 col-sm-10">
<!--nocache-->
<?php if($this->Session->flash()) { echo $this->Session->flash(); } ?>
<?php if($this->Session->flash('auth')) { echo $this->Session->flash('auth') ;} ?>
<!--/nocache-->
<?php
// output success info
if(isset($this->params['named']['success']) && $this->params['named']['success']=='1') : ?>
// Success message
<?php endif; ?>
<h1 class="lead">Request Pricing Information</h1>
<div class="formWrapper">
<?php echo $this->Form->create();?>
<div>
<h2>Select Date</h2>
<fieldset>
<div class="form-group">
<?php echo $this->Form->input('date', array(
'type' => 'text',
'placeholder' => 'MM/DD/YYYY',
'label'=> 'What is the date of your event / project?', 'class' => 'required form-control',
'div' => 'form-group col-lg-6 col-md-6 col-sm-6'
)); ?>
</div>
<div class="clearMe smallContentSpacer "> </div>
</fieldset>
<h2>Type of Photography</h2>
<fieldset>
<?php
$options = array(
'Wedding Photography' => 'Wedding / Event Photography',
'Portrait Photography' => 'Portrait Photography',
'Corporate Photography' => 'Corporate Photography',
'Other Photography' => 'Other'
);
echo $this->Form->input('type_of_photography', array(
'options' => $options,
'label' => 'What type of photography are you inquiring about?',
'empty' => 'Please select',
'class' => 'form-control',
'div' => 'form-group col-lg-6 col-md-6 col-sm-6'
));
// display error message
echo $this->Form->error('Contact.type_of_photography');
?>
<div id="photographyDetailsArea" style="display:none">
<?php // Weddings ?>
<div class="details_weddings" style="clear: both; display:none">
<h4>Wedding Details</h4>
<?php
echo $this->Form->input('wedding_venue', array(
'label' => 'Reception Venue:',
'type' => 'text',
'placeholder'=> 'Reception Venue',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('wedding_venuecity', array(
'label' => 'City:',
'type' => 'text',
'placeholder' => 'City',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('wedding_venuestate', array(
'label' => 'State / Province:',
'type' => 'text',
'placeholder' => 'State / Province',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('wedding_venuecountry', array(
'label' => 'Country:',
'type' => 'text',
'default' => 'USA',
'class' => 'form-control',
'div' => 'form-group'
));
?>
</div>
<?php // Portraits ?>
<div class="details_portraits" style="clear: both; display:none">
<h4>Portrait Details</h4>
<div class="radioWrap">
<?php
$options = array('Studio' => 'Studio', 'Location' => 'Location', 'Not Sure' => 'Not Sure');
echo $this->Form->input('portrait_location', array(
'type' => 'radio',
'before' => '<div class="radio-inline">',
'after' => '</div>',
'separator' => '</div><div class="radio-inline">',
'options' => $options,
'value' => 'Not Sure',
'legend' => false,
'div' => 'form-group'
));
?>
</div>
</div>
<?php // Corporate ?>
<div class="details_corporate" style="clear: both; display:none">
<h4>Corporate Details</h4>
<?php
$options = array(
'Advertising' => 'Advertising',
'Editorial' => 'Editorial',
'Fashion Shoot' => 'Fashion Shoot',
'Other' => 'Other'
);
echo $this->Form->input('corporate_details', array(
'options' => $options,
'label' => 'What kind of Corporate Photography are you looking for?',
'empty' => false,
'class' => 'form-control',
'div' => 'form-group col-lg-6 col-md-6 col-sm-6'
));
?>
</div>
<?php // Other ?>
<div class="details_other" style="clear: both; display:none">
<h4>Details</h4>
<?php
echo $this->Form->input('other_photography_details', array(
'label' => 'Project Details',
'type' => 'textarea',
'rows' => 4,
'cols' => 30,
'class' => 'form-control',
'div' => 'form-group col-lg-6 col-md-6 col-sm-6'
));
?>
</div>
<input name="data[Pricing][validate_options]" value="" id="ContactValidateOptions" type="hidden" />
</div>
</fieldset>
<h2>Personal Information</h2>
<fieldset>
<?php
echo $this->Form->input('firstname', array(
'label' => 'First Name:',
'type' => 'text',
'placeholder' => 'First Name',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('lastname', array(
'label' => 'Last Name:',
'type' => 'text',
'placeholder' => 'Last Name',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('email', array(
'label' => 'Email:',
'type' => 'text',
'placeholder' => 'Email',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('city', array(
'label'=> 'City:',
'type' => 'text',
'placeholder' => 'City',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('state', array(
'label' => 'State / Province:',
'type' => 'text',
'placeholder' => 'State / Province',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('country', array(
'label' => 'Country:',
'type' => 'text',
'default'=>'USA',
'class' => 'form-control',
'div' => 'form-group'
));
echo $this->Form->input('phone', array(
'label' => 'Phone:',
'type' => 'text',
'placeholder' => 'Phone number',
'class' => 'form-control',
'div' => 'form-group'
));
?>
<?php
$options = array(
array (
'name'=> 'Anytime',
'value' => 'Anytime',
'selected' => 'selected'
),
'Morning' => 'Morning',
'Noon' => 'Noon',
'Afternoon' => 'Afternoon',
'Evening' => 'Evening'
);
echo $this->Form->input('contact_time', array(
'options' => $options,
'label' => 'Preferred Contact Time <i>(your timezone)</i>',
'empty'=>false,
'class' => 'form-control',
'div' => 'form-group col-lg-6 col-md-6 col-sm-6'
));
?>
</fieldset>
<h2>Additional Information</h2>
<fieldset>
<?php
echo $this->Form->input('additional_information', array(
'label' => 'Comments:',
'type' => 'textarea',
'rows' => 10,
'cols' => 30,
'class' => 'form-control ignore',
'div' => 'form-group'));
?>
<div class="likeLabel"></div><br />
<?php
$options = array(
'Past Client' => 'Past Client',
'Vendor Recommendation' => 'Vendor Recommendation',
'Online Forum' => 'Online Forum',
'Magazine Feature' => 'Magazine Feature',
'Magazine AD - Listing' => 'Magazine advertising or listing',
'Other' => 'Other'
);
echo $this->Form->input('howdidyoufindus', array(
'options' => $options,
'label' => 'How did you find us?',
'class' => 'form-control ignore',
'div' => 'form-group',
'empty'=> 'Please select'
));
?>
<label for="findusaddtional" class="additionalInfoLabel"></label>
<div id="additionalInfoArea" class="input text">
<?php echo $this->Form->input('findusadditional', array(
'type' => 'text',
'label' => false,
'class' => 'form-control ignore',
'div' => 'form-group'
));?>
</div>
</fieldset>
</div>
<?php $this->Form->end(); ?>
</div>
<div class="clearMe smallContentSpacer "> </div>
</div><!--class="col-lg-11 col-md-10 col-sm-10" -->
<?php
// Render Javascript and required files
$this->Html->script(array('jquery.steps','jquery.validate.min', 'infopacketform'), array('block' => 'scriptBottom'));
echo $this->Html->css('multistepForm');
?>
这是包含验证+ jquery-step调用的Javascript文件：
$(function() {
var form = $("#PricingIndexForm");
// jQuery Validator - add settings for Bootstrap
$.validator.setDefaults({
debug: true,
success: "valid",
highlight: function(element) {
$(element).closest(".form-group").addClass("has-error");
},
unhighlight: function(element) {
$(element).closest(".form-group").removeClass("has-error");
},
errorElement: "span",
errorClass: "help-block",
errorPlacement: function(error, element) {
if(element.parent(".input-group").length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
// jQuery Validator - additional validation format for Date
$.validator.addMethod(
"dateFormat",
function(value, element) {
return value.match(/^\d\d?\/\d\d?\/\d\d\d\d$/);
},
"Please enter a date in the format dd/mm/yyyy"
);
// jQuery Validator - Form Validation
form.validate({
rules: {
"data[Pricing][date]": { dateFormat:true },
"data[Pricing][firstname]" : { required: true, minlength: 2},
"data[Pricing][lastname]" : { required: true, minlength: 2},
"data[Pricing][email]" : { email: true},
"data[Pricing][city]" : { required: true, minlength: 2},
"data[Pricing][state]" : { required: true, minlength: 2},
"data[Pricing][country]" : { required: true, minlength: 2},
"data[Pricing][phone]" : { required: true, minlength: 2},
"data[Pricing][additional_information]" : { required: false},
"data[Pricing][findusadditional]" : { required: false}
},
ignore: ".ignore"
});
form.children("div").steps({
headerTag: "h2",
bodyTag: "fieldset",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
if (currentIndex > newIndex)
{
return true;
} else {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
}
},
onStepChanged: function (event, currentIndex, newIndex)
{
// adjust form height to content
switch(currentIndex) {
case 0:
setFormstepContentHeight(200);
break;
case 1:
var selectedOption = $('#PricingTypeOfPhotography').val();
if( selectedOption === '' ||
selectedOption === 'Portrait\ Photography' ||
selectedOption === 'Other\ Photography') {
setFormstepContentHeight(200);
} else if ( selectedOption === 'Corporate\ Photography' ) {
setFormstepContentHeight(220);
} else {
setFormstepContentHeight(450);
}
break;
case 2:
setFormstepContentHeight(600);
break;
case 3:
setFormstepContentHeight(450);
break;
}
},
onFinishing: function (event, currentIndex)
{
return form.valid();
},
onFinished: function (event, currentIndex)
{
console.log(form);
// Submit form input
form.submit();
}
});
/**
* Set the height of the form step based on the content
* @param height
*/
function setFormstepContentHeight(height) {
$('.wizard>.content').css('height', height + 'px');
}
});
我感谢任何意见！
答案 0 :(得分：1)
正如@scowler如此慷慨地指出，问题是当debug: true中$.validator.setDefaults({...})设置时，表单无法提交。
设置为false后，表单提交无法完美运行。