displaying msg on above the line, how to display error msg below line. I have added below view page. any suggestions.
below is view page
<div class="ibox-content bwform clearfix" id="bwcart">
<h2><b>Profile</b><div id="loader"></div></h2>
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
'template' => "{label}<div class=\"col-md-12\">{input}\n{error}</div>",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
<div class="box-2">
<div class="input input--hoshi <?=$prefilled ?>">
<?= $form->field($model, 'firstname')->textInput(array('placeholder' => '','class'=>'input__field input__field--hoshi'))->label(false); ?>
<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="first_name">
<span class="input__label-content input__label-content--hoshi">First Name</span>
</label>
</div>
</div>
<div class="box-2">
<div class="input input--hoshi <?=$prefilled ?>">
<?= $form->field($model, 'lastname')->textInput(array('placeholder' => '','class'=>'input__field input__field--hoshi'))->label(false); ?>
<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="first_name">
<span class="input__label-content input__label-content--hoshi">Last Name</span>
</label>
</div>
</div>
You can use this solution:
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
//modify this
'template' => "{label}<div class='col-md-12'>{input}</div><div class='col-md-12 '>{error}</div>",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
So your error tag is positioned
under your input tag.
Your error attribute should not be in your col-md-12 class div.
So it should be like this:
<?php $form = ActiveForm::begin(
['action' =>'',
'options' => ['method'=>'post','class'=>'form-horizontal','id'=>'profile-form','enctype'=>'multipart/form-data'],
'fieldConfig' => [
'template' => "{label}<div class=\"col-md-12\">{input}</div>{error}",
'labelOptions' => ['class' => 'col-lg-12 control-label p-l-0'],
],
'enableAjaxValidation'=>true,'enableClientValidation' => true,'validateOnSubmit'=>true]); ?>
Related
I'm trying to create a dynamic form for one of my projects. I used wbraganca's Dynamic From to achieve this. In my dynamic form I have a DepDrop to show subcategories list from a parent category.
My _form.php
<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>
<div class="row">
<div class="col-md-6">
<?= $form->field($model, 'rq_job_no')->textInput() ?>
</div>
<div class="col-md-6">
<?= $form->field($model, 'rq_req_date')->widget(\yii\jui\DatePicker::class, [
//'language' => 'ru',
'dateFormat' => 'php:Y-m-d',
'clientOptions' => [
'changeMonth' => true,
'changeYear' => true,
'showButtonPanel' => true,
'yearRange' => '1990:2030',
'minDate' => date('Y-m-d'),
],
'options' => ['class' => 'form-control', 'readOnly' => true, 'placeholder' => 'Enter the Item Required Date'],
]) ?>
</div>
<div class="col-md-6">
<?= $form->field($model, 'rq_priority_type')->dropDownList(['urgent' => 'Urgent', 'normal' => 'Normal'], ['prompt' => '--Select Priority Type--']) ?>
</div>
<div class="col-md-6">
</div>
<div class="col-md-6">
<?= $form->field($model, 'rq_approval_type')->dropDownList([1 => ' Approved Vendor Needed', 2 => 'Approved Submitted Needed', 3 => 'Warranty Certificate to be Collected', 4 => 'Long Lead Material',], ['prompt' => '--Select Type of Approval--']) ?>
<?php echo $form->field($model, 'rq_cat_type')->widget(Select2::class, [
'data' => $catData,
'options' => ['placeholder' => '--Select Request Type--', 'class' => 'form-control'],
'pluginOptions' => [
'allowClear' => true
],
]);
?>
</div>
<div class="col-md-12">
<?= $form->field($model, 'rq_remarks')->textarea(['rows' => 6]) ?>
</div>
</div>
<!-- code for dynamic form -->
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-envelope"></i> Request Items</h4>
</div>
<div class="panel-body">
<?php DynamicFormWidget::begin([
'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
'widgetBody' => '.container-items', // required: css class selector
'widgetItem' => '.item', // required: css class
'limit' => 10, // the maximum times, an element can be cloned (default 999)
'min' => 1, // 0 or 1 (default 1)
'insertButton' => '.add-item', // css class
'deleteButton' => '.remove-item', // css class
'model' => $modelsAddress[0],
'formId' => 'dynamic-form',
'formFields' => [
'item_name',
'item_qty',
'item_unit',
],
]); ?>
<div class="container-items">
<!-- widgetContainer -->
<?php foreach ($modelsAddress as $i => $modelAddress) : ?>
<div class="item panel panel-default">
<!-- widgetBody -->
<div class="panel-heading">
<h4 class="panel-title pull-left">Items</h4>
<div class="pull-right">
<button type="button" class="add-item btn btn-success btn-xs"><i class="fa fa-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="fa fa-minus"></i></button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<?php
// necessary for update action.
if (!$modelAddress->isNewRecord) {
echo Html::activeHiddenInput($modelAddress, "[{$i}]rt_id");
}
?>
<?php //$form->field($modelAddress, "[{$i}]rt_item")->textInput(['maxlength' => true]) ?>
<?= $form->field($modelAddress, "[{$i}]rt_item")->widget(DepDrop::class, [
'options' => ['id' => 'reqitems-'.$i.'-rt_item'],
'pluginOptions' => [
'depends' => ['requests-rq_cat_type'],
'placeholder' => '--Select Location--',
'url' => Url::to(['/requests/subcat'])
]
]); ?>
<div class="row">
<div class="col-sm-6">
<?= $form->field($modelAddress, "[{$i}]rt_qty")->textInput(['maxlength' => true]) ?>
</div>
<div class="col-sm-6">
<?= $form->field($modelAddress, "[{$i}]rt_unit")->textInput(['maxlength' => true]) ?>
</div>
</div><!-- .row -->
</div>
</div>
<?php endforeach; ?>
</div>
<?php DynamicFormWidget::end(); ?>
</div>
</div>
<div class="form-group">
<?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
</div>
<?php ActiveForm::end(); ?>
My Controller action to load the subcategory
public function actionSubcat()
{
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
$out = [];
if (isset($_POST['depdrop_parents'])) {
$parents = $_POST['depdrop_parents'];
if ($parents != null) {
$cat_id = $parents[0];
$out = self::getSubCatList($cat_id);
return ['output' => $out, 'selected' => ''];
}
}
return ['output' => 'No Category Available', 'selected' => ''];
}
public function getSubCatList($cat_id)
{
$output = [];
$category = Item::find()->where(['item_category' => $cat_id])->orderBy('item_title')->all();
if (empty($category)) {
$output[] = ['id' => '0', 'name' => 'No Category Available'];
} else {
foreach ($category as $cat) {
$output[] = ['id' => $cat->item_id, 'name' => $cat->item_title];
}
}
return $output;
}
My problem is that DepDrop is only loading the subcategory for the first loop of the dynamic form and leaves the rest loop blank. Attached screenshot for your reference.
Can anyone help by pointing what I am missing or how can I achieve my requirement.
I am using ActiveForm of yii2 and I want to customize the validation errors. I want to display errors on tooltip.
This is my form
<?= $form = ActiveForm::begin(['id' => 'login-form','method'=>'post']); ?>
<?=
$form->field($model, 'email')
->textInput([
'class'=>'form-control login_email',
'placeholder'=>'Email'
/*'onfocus'=>"this.value = '';",
"onblur"=>"if (this.value == '') {
this.value = 'Email';
}"*/
])
->label(false);
?>
<?=
$form->field($model, 'password')
->passwordInput([
'class'=>'form-control',
'placeholder'=>'Password'
])
->label(false);
?>
<input type="text" name="hidden" value="login" hidden="true">
<p class="forgot">
<a href="<?= Yii::$app->urlManager->createUrl(['site/request-password-reset']); ?>">
Forgot Password?
</a>
</p>
<div class="form-group">
<?= Html::submitButton('Log In', ['class' => 'sign-in','name' => 'login-button']) ?>
</div>
<?php ActiveForm::end(); ?>
Please tell me if anyone has idea about this.
Update error message in form template like below
$form = ActiveForm::begin([
'id' => 'login-form',
'options' => ['enctype' => 'multipart/form-data'],
'fieldConfig' => ['template' => "<div class=\"input-cover\"><div class=\"tooltip\">{error}</div>\n{label}\n{input}</div>",
'inputOptions' => ['class' => 'input-control'],
],
]);
Im using bootstrap and Im trying to set a background image for the login screen.I try with div with id that catch all the things and set the background but didnt work .
Here my Login.php
<div id="bimg">
<div class="site-login">
<h1><?= Html::encode($this->title) ?></h1>
<p>Please fill out the following fields to login:</p>
<?php
$form = ActiveForm::begin([
'id' => 'login-form',
'options' => ['class' => 'form-horizontal'],
'fieldConfig' => [
'template' => "{label}\n <div class=\"center\"><div class=\"col-lg-3\">{input}</div>\n<div class=\"col-lg-8\">{error}</div></div>",
'labelOptions' => ['class' => 'col-lg-1 control-label'],
],
]);
?>
<?= $form->field($model, 'email')->textInput(['autofocus' => true, 'placeholder' => 'Write your email address']) ?>
<?= $form->field($model, 'password')->passwordInput(['placeholder' => 'Write your password']) ?>
<?=
$form->field($model, 'rememberMe')->checkbox([
'template' => "<div class=\"col-lg-offset-1 col-lg-3\">{input} {label}</div>\n<div class=\"col-lg-8\">{error}</div>",
])
?>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-11">
<div>
<?= Html::a(Yii::t("app", "Forgotten password") . "?", ["/site/forgot"]) ?>
<br>
</div>
<br>
<?= Html::submitButton('Login', ['class' => 'btn btn-primary', 'name' => 'login-button']) ?>
</div>
</div>
<?php ActiveForm::end(); ?>
</div>
and the class with path in bootstrap.css
#bimg{
width:100%;
background-image: url(../web/assets/css/images/5.jpg) !important;
}
In layouts-main.php
controller->action->id == 'login') ? 'background-wrapper' : NULL ?>">
Check on which page u are , and if u are the page u want set the "class" u want
I set the form parametres:
<? $form = ActiveForm::begin(
[
'options' => ['class' => 'form-horizontal'],
'fieldConfig' =>
[
'template' => '<div class="control-group">{input}</div>.<div class="control-group error">{error}</div>',
],
]);
?>
<div class="control-group">
<b>Регистрация</b>
</div>
<?
echo $form->field($model, 'login', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Логин')]);
echo $form->field($model, 'password', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Пароль')]);
echo $form->field($model, 'repassword', ['template' => "{input}{error}", 'inputOptions' => array('placeHolder' => 'Повторите пароль')]);
?>
As a result, it still turns a standard form with standart classes:
<form id="w0" class="form-horizontal" action="/web/index.php?r=site%2Freg" method="post">
<input type="hidden" name="_csrf" value="cjZfVVZNOElDbml4NBlhMBRbcjslfFIvFg4OJm4aFSpERDI5Zn19OA==">
<div class="control-group">
<b>Регистрация</b>
</div>
<div class="form-group field-user-login required">
<input type="text" id="user-login" class="asd" name="User[login]" placeHolder="Логин">
<div class="help-block"></div>
</div>
<div class="form-group field-user-password required">
<input type="text" id="user-password" class="asd" name="User[password]" placeHolder="Пароль">
<div class="help-block"></div>
</div>
<div class="form-group field-user-repassword required">
<input type="text" id="user-repassword" class="asd" name="User[repassword]" placeHolder="Повторите пароль">
<div class="help-block"></div>
</div>
</form>
I don't need this classes and div with "help-block" class.
do something like :
$form->field($model, 'username', [ 'inputTemplate' => '<div class="input-group input-group-sm"><span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>{input}</div>'])->label(false)->textInput(['placeholder'=>'Your Email']);
Updatedcustomize template for all :
$form = ActiveForm::begin([
'layout' => 'horizontal',
'fieldConfig' => [
'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
'horizontalCssClasses' => [
'label' => 'col-sm-4',
'offset' => 'col-sm-offset-4',
'wrapper' => 'col-sm-8',
'error' => '',
'hint' => '',
],
],
]);
references : yii2 doc and bootstrap activeform yii2 doc
<?php $form = ActiveForm::begin(['id' => 'contact-form']); ?>
<?= $form->field($model, 'email', [
'inputOptions' => [ 'placeholder' => 'Ihre E-Mail Adresse', 'class' => 'newsletter-cta-mail' ]
])->label(false)->textInput(); ?>
<?= Html::submitButton('20€ Gutschein sichern', ['class' => 'green newsletter-cta-button', 'name' => 'contact-button', 'value' => 'hallo']) ?>
<?php ActiveForm::end(); ?>
results into:
<form id="contact-form" action="/" method="post" role="form">
<input type="hidden" name="_csrf" value="WFlFWnIwU1Y3HnQKSn06GG46PXcjQRUzNCA9KhRiYCxvFXQ9RHIiPA=="> <div class="form-group field-newsletterform-email required has-error">
<input type="text" id="newsletterform-email" class="newsletter-cta-mail" name="NewsletterForm[email]" placeholder="Ihre E-Mail Adresse">
<p class="help-block help-block-error">Verification Code cannot be blank.</p>
</div> <button type="submit" class="green newsletter-cta-button" name="contact-button" value="hallo">20€ Gutschein sichern</button></form>
But I dont need the wrapping
How to disable this?
You could simply use Html::activeTextInput() :
<?= Html::activeTextInput($model, 'email', ['placeholder' => 'Ihre E-Mail Adresse', 'class' => 'newsletter-cta-mail']); ?>
Or change ActiveForm::$fieldConfig configuration :
ActiveForm::begin([
'id' => 'contact-form',
'fieldConfig' => [
'options' => [
'tag' => false,
],
],
]);
or You could something like this (change div to span)
$form = ActiveForm::begin([
'id' => 'contact-form',
'fieldConfig' => [
'template' => "{input}",
'options' => [
'tag'=>'span'
]
]
]);
<?= $form->field($model, 'email', [
'template' => '{input}', // Leave only input (remove label, error and hint)
'options' => [
'tag' => false, // Don't wrap with "form-group" div
],
]) ?>
I have solved it like this....put tag as span.. also you can prepend icons infront of the box.
<div id="login-box-inner">
<?php $form = ActiveForm::begin([
'id' => 'login-form',
'options' => ['role'=>'form'],
'fieldConfig' => [
'options' => [
'tag' => 'span',
],
],
]); ?>
<?= $form->field($model, 'username',[
'template' => '
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user emerald"></i></span>
{input}
</div>
{error}',
'inputOptions' => [
'placeholder' => 'Username ...',
'class'=>'form-control',
]])
?>
<?= $form->field($model, 'password', [
'template' => '
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key emerald"></i></span>
{input}
</div>
{error}',
'inputOptions' => [
'placeholder' => 'Password ...',
'class'=>'form-control',
]])->input('password')
?>
<?php ActiveForm::end(); ?>