my code works for validating after next button and
when i click back button the steps are disabled until every input correctly
<?php
use yii\helpers\Url;
use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\widgets\ActiveForm;
use kartik\select2\Select2;
use kartik\date\DatePicker;
use backend\models\Account;
/* @$this yii\web\View */
/* @$model backend\models\Account */
/* @$form yii\widgets\ActiveForm */
$this->registerJsFile('@web/dist/js/plugins/forms/wizards/steps.min.js',['depends' => [\yii\web\JqueryAsset::className()]]);
$this->registerJsFile('@web/dist/js/plugins/forms/selects/select2.min.js',['depends' => [\yii\web\JqueryAsset::className()]]);
$this->registerJsFile('@web/dist/js/plugins/pickers/datepicker.js',['depends' => [\yii\web\JqueryAsset::className()]]);
$id_parent = array_merge([1 => 'NO PARENT'], ArrayHelper::map(Account::find()->asArray()->all(),'id', function($model, $defaultValue) {
return $model['account_code'];
}
));
?>
<div class="account-form">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<?php $form = ActiveForm::begin(['options' => ['id' => 'step-form']]); ?>
<h6>Data</h6>
<fieldset>
<div class="row">
<div class="col-md-12">
<?= $form->field($model, 'account_type')->dropDownList(
[
'Branch' => 'Branch',
'Customer' => 'Customer',
],
[
'prompt' => 'Pilih ...',
'onchange' => '$.post("'.Url::base().'/reff/account?type='.'" + $(this).val(), function(data) {
/*$("select#account").val("").trigger("change");
what = JSON.parse(data);
if (!$("select#account").val()) {
$("select#account").html(what.account);
}*/
}
);'
]) ?>
<?= $form->field($model, 'account_code')->dropDownList(['a'=>'a'],['prompt' => 'Pilih ...']) ?>
</div>
</div>
</fieldset>
<h6>Detail</h6>
<fieldset>
<div class="row">
<div class="col-md-12">
<?= $form->field($model, 'id_parent')->dropDownList(
$id_parent,
[
'prompt' => 'Pilih ...',
]) ?>
</div>
</div>
</fieldset>
<h6>Detail</h6>
<fieldset>
<div class="row">
<div class="col-md-12">
<?= $form->field($model, 'date_active')->textInput(['autocomplete' => 'off']) ?>
<?= $form->field($model, 'date_end')->textInput(['autocomplete' => 'off']) ?>
<?= $form->field($model, 'active')->dropDownList(
[
1 => 'Aktif',
0 => 'Tidak Aktif',
],
[
'prompt' => 'Pilih ...',
'options' => [1 => ['selected' => true]]
]
) ?>
</div>
<div class="col-md-12 text-center">
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success hidden']) ?>
<?= Html::a('Cancel', ['index'], ['class' => 'btn btn-primary hidden']) ?>
</div>
</div>
</div>
</fieldset>
<?php ActiveForm::end(); ?>
</div>
</div>
</div>
<?php
$urlCancel = Url::to(['account/index']);
$js = <<< JS
$(document).ready(function(){
$('#step-form').steps({
headerTag: "h6",
bodyTag: "fieldset",
transitionEffect: "fade",
titleTemplate: '<span class="number">#index#</span> #title#',
enableFinishButton: true,
enableCancelButton: true,
labels: {
next: "Next",
finish: "Save",
previous: "Back",
},
onStepChanging: function (event, currentIndex, newIndex) {
cur = currentIndex;
ret = true;
tmp = [];
$('#step-form-p-' + cur).find('select').each(
function(index) {
idnya = $(this).attr('id');
$("#step-form").yiiActiveForm('validateAttribute', idnya);
err = $(this).parent().has('has-error');
msg = $(this).parent().find('.help-block').html();
if (err !== false) {
if (msg !== "") {
tmp.push(msg);
}
}
}
);
$('#step-form-p-' + cur).find('input').each(
function(index) {
idnya = $(this).attr('id');
$("#step-form").yiiActiveForm('validateAttribute', idnya);
err = $(this).parent().has('has-error');
msg = $(this).parent().find('.help-block').html();
if (err !== false) {
if (msg !== "") {
tmp.push(msg);
}
}
}
);
if (tmp.length > 0) {
ret = false;
} else {
ret = true;
}
tmp = [];
return ret;
},
onCanceled: function (event) {
window.location = '$urlCancel';
},
onFinished: function (event, currentIndex) {
$(this).yiiActiveForm('submitForm');
},
});
/* Reinitialize */
$('#account-id_parent').select2();
$('#account-account_type').select2();
$('#account-account_code').select2();
$('#account-date_active').datepicker({format:'yyyy-mm-dd'});
$('#account-date_end').datepicker({format:'yyyy-mm-dd'});
});
JS;
$css = <<< CSS
/*.input-group-addon {
border: 1px solid #ddd;
}
.select2-container {
width: 100% !important;
}
.select2 .select2-selection {
height: 36px;
}*/
.has-error span.select2-selection.select2-selection--single {
border-color: #D84315;
}
.has-success span.select2-selection.select2-selection--single {
border-color: #43A047;
}
CSS;
$this->registerJs($js);
$this->registerCss($css);
?>
i want to validate form before next button click