Hello, I am on trouble using SFormWizard…
I wanna make user can not go to next step if the required fields on current step are not filled…
What should I do?
Here is my code
<?php if(Yii::app()->user->hasFlash('registration')): ?>
<div class="success">
<?php echo Yii::app()->user->getFlash('registration'); ?>
</div>
<?php else: ?>
<div class="form">
<?php $form=$this->beginWidget('UActiveForm', array(
'id'=>'registration-form',
'enableAjaxValidation'=>true,
'disableAjaxValidationAttributes'=>array('RegistrationForm_verifyCode'),
'enableClientValidation'=>true,
'clientOptions'=>array(
'validateOnSubmit'=>true,
),
)); ?>
<?php echo $form->errorSummary(array($model,$profile)); ?>
<div class="step" id="Step1">
<div class="row">
<?php echo $form->labelEx($model,'email'); ?>
<?php echo $form->textField($model,'email'); ?>
<?php echo $form->error($model,'email'); ?>
</div>
<!--<div class="row">
<?php echo $form->labelEx($model,'verifyEmail'); ?>
<?php echo $form->textField($model,'verifyEmail'); ?>
<?php echo $form->error($model,'verifyEmail'); ?>
</div>
<!--<div class="row">
<?php echo $form->labelEx($model,'username'); ?>
<?php echo $form->textField($model,'username'); ?>
<?php echo $form->error($model,'username'); ?>
</div>-->
<div class="row">
<?php echo $form->labelEx($model,'password'); ?>
<?php echo $form->passwordField($model,'password'); ?>
<?php echo $form->error($model,'password'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'verifyPassword'); ?>
<?php echo $form->passwordField($model,'verifyPassword'); ?>
<?php echo $form->error($model,'verifyPassword'); ?>
</div>
<?php if (UserModule::doCaptcha('registration')): ?>
<div class="row">
<?php echo $form->labelEx($model,'verifyCode'); ?>
<?php $this->widget('CCaptcha'); ?>
<?php echo $form->textField($model,'verifyCode'); ?>
<?php echo $form->error($model,'verifyCode'); ?>
<p class="hint"><?php echo UserModule::t("Please enter the letters as they are shown in the image above."); ?>
<br/><?php echo UserModule::t("Letters are not case-sensitive."); ?></p>
</div>
<?php endif; ?>
</div>
<div class="step" id="Step2">
<fieldset><legend>Personal Information</legend>
<?php
$profileFields=$profile->getFields();
if ($profileFields) {
foreach($profileFields as $field) {
if ($field->position>0 && $field->position<6){
//for ($field->id = 1; $field->id < 13; $field->id++){
?>
<div class="row">
<?php echo $form->labelEx($profile,$field->varname);
if ($widgetEdit = $field->widgetEdit($profile)) {
echo $widgetEdit;
} elseif ($field->range) {
echo $form->dropDownList($profile,$field->varname,Profile::range($field->range));
} elseif ($field->field_type=="TEXT") {
echo $form->textArea($profile,$field->varname,array('rows'=>6, 'cols'=>44));
} elseif ($field->varname=="accessible") {
echo $form->checkBox($profile,$field->varname,array('value'=>'Yes', 'uncheckValue'=>'No'));
echo 'Yes';
} elseif ($field->varname=="birthday") {
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
'model'=>$profile,
'name'=>$field->varname,
'attribute'=>$field->varname,
// additional javascript options for the date picker plugin
'options'=>array(
'showAnim'=>'clip',
'changeMonth'=>true,
'changeYear'=>true,
'yearRange'=>'1930:2010',
'dateFormat'=>'yy-mm-dd',
),
'htmlOptions'=>array(
'style'=>'height:20px;'
),
));
}else {
echo $form->textField($profile,$field->varname,array('size'=>60,'maxlength'=>(($field->field_size)?$field->field_size:255)));
}
echo $form->error($profile,$field->varname); ?>
</div>
<?php
}
}
//}
}
?>
</fieldset>
<fieldset><legend>Contact Information</legend>
<div class="row">
<?php echo $form->labelEx($model,'email'); ?>
<?php echo $form->textField($model,'email', array('readonly'=>true)); ?>
<?php echo $form->error($model,'email'); ?>
</div>
<?php
$profileFields=$profile->getFields();
if ($profileFields) {
foreach($profileFields as $field) {
if ($field->position>5 && $field->position<14){
//for ($field->id = 1; $field->id < 13; $field->id++){
?>
<div class="row">
<?php echo $form->labelEx($profile,$field->varname);
if ($widgetEdit = $field->widgetEdit($profile)) {
echo $widgetEdit;
} elseif ($field->range) {
echo $form->dropDownList($profile,$field->varname,Profile::range($field->range));
} elseif ($field->field_type=="TEXT") {
echo $form->textArea($profile,$field->varname,array('rows'=>6, 'cols'=>44));
} elseif ($field->varname=="accessible") {
echo $form->checkBox($profile,$field->varname,array('value'=>'Yes', 'uncheckValue'=>'No'));
} elseif ($field->varname=="birthday") {
$this->widget('zii.widgets.jui.CJuiDatePicker',array(
'model'=>$profile,
'name'=>$field->varname,
'attribute'=>$field->varname,
// additional javascript options for the date picker plugin
'options'=>array(
'showAnim'=>'clip',
'changeMonth'=>true,
'changeYear'=>true,
'yearRange'=>'1930:2010',
'dateFormat'=>'yy-mm-dd',
),
'htmlOptions'=>array(
'style'=>'height:20px;'
),
));
}else {
echo $form->textField($profile,$field->varname,array('size'=>60,'maxlength'=>(($field->field_size)?$field->field_size:255)));
}
echo $form->error($profile,$field->varname); ?>
</div>
<?php
}
}
//}
}
?>
</fieldset>
</div>
<div class="step" id="Step3">
<?php
$profileFields=$profile->getFields();
if ($profileFields) {
foreach($profileFields as $field) {
if ($field->position>13 && $field->position<21){
//for ($field->id = 1; $field->id < 13; $field->id++){
?>
<div class="row">
<?php echo $form->labelEx($profile,$field->varname);
if ($widgetEdit = $field->widgetEdit($profile)) {
echo $widgetEdit;
} elseif ($field->range) {
echo $form->dropDownList($profile,$field->varname,Profile::range($field->range));
} elseif ($field->field_type=="TEXT") {
echo $form->textArea($profile,$field->varname,array('rows'=>6, 'cols'=>44));
} elseif ($field->varname=="accessible") {
echo $form->checkBox($profile,$field->varname,array('value'=>'Yes', 'uncheckValue'=>'No'));
} else {
echo $form->textField($profile,$field->varname,array('size'=>60,'maxlength'=>(($field->field_size)?$field->field_size:255)));
}
echo $form->error($profile,$field->varname); ?>
</div>
<?php
}
}
}
?>
<div class="row">
<p> <?php echo $form->checkBox($model, 'iagree');?>
I Accept Term and Condition
</p>
</div>
</div>
<!--<div class="step" id="Step4">
<table class="dataGrid">
<tr>
<th class="label">Name</th>
<td><?php echo $profile->guest_name; ?></td>
</tr>
<tr>
<th class="label">Membership </th>
<td><?php echo $profile->membership; ?></td>
</tr>
<tr>
<th class="label">Loyalty Number </th>
<td><?php echo $model->id; ?></td>
</tr>
</table>
</div>-->
<!--<div class="row buttons">
<?php //echo CHtml::submitButton(UserModule::t("Register")); ?>
</div>-->
<div class="row buttons">
<input class="navigation_button" id="back" value="Previous" type="reset" />
<input class="navigation_button" id="next" value="Next" type="submit" />
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
<div id="stepmessage"></div>
<div id="data"></div>
<?php
$this->widget('ext.sformwizard.SFormWizard',array(
'selector'=>"#registration-form",
'historyEnabled' =>"true",
'formOptions' => '{
success: function(data){$("#stepmessage").fadeTo(500,1,function(){ $("#stepmessage").html(data); })},
beforeSubmit: function(data){
$("#data").html("data sent to the server: " + $.param(data));
},
dataType: "json",
resetForm: true
} ',
'linkClass' =>".link",
'submitStepClass' =>".submit_step",
'back' => ":reset",
'next' => ":submit",
'textSubmit' => "Complete Registration",
'textNext' => "Next",
'textBack' =>"Previous",
'disableUIStyles' => "true",
'jsAfterStepShown'=> '
/* Available in data (data.steps ,data.settings etc):
isBackNavigation - boolean
settings - options object containing the options set for the wizard
activatedSteps - list of activated steps (visited steps)
isLastStep - boolean specifying whether the current step is a submit step
isFirstStep - boolean
previousStep - the id of the previously visited step
currentStep - the id of the current step
backButton
nextButton
steps - the steps of the wizard
firstStep - the id of the first step
*/
$("#stepmessage").html("");
$.each(data.activatedSteps, function(){
$("#stepmessage").append(this+" - ");
});
var currentstepnumber = data.activatedSteps.length;
$("#stepmessage").append("<br/>Step "+currentstepnumber+"/"+data.steps.length);',
));?>
<?php endif; ?>
This will show error summary on the last step (after submit button is clicked).
?