I have a Yii2 active form which includes a field with datepicker. My form is using following attributes:
<?php $form = ActiveForm::begin([
'id' => 'campaign-form',
'enableClientValidation' => true,
'fieldConfig' => [
'options' => ['class' => 'gg-create-group'],
'labelOptions' => ['class' => null],
],
'options' => [
'autocomplete' => 'off',
'enctype' => 'multipart/form-data',
],
]);
?>
I have a field using jquery datepicker, the issue is each time I click on the arrows to navigate through the months in the calendar, client validation is triggered an a error is shown:
I need to stop the error message if the calendar is open and I am using the calendar navigation.
I know I can turn off client validation using:
enableClientValidation => false
But I want to keep client validation. I am wondering if Yii javascript script: $yiiform has an option to do that?
I found a solution. I can use validationOnBlur, if I set it to false on specific field it fixes the issue.
<?php echo $form->field($model, 'client_end_date',
['validateOnBlur' => false])->textInput(['readonly' => 'readonly']); ?>
Related
I have a Yii2 Modal widget and I need to close the modal when escape key is pressed.
<?= Modal::widget([
'id' => 'modal_view',
'options' => [
'tabindex' => false, // important for Select2 to work properly
]
]) ?>
I found the Bootstrap Modal Options and the clientOptions but it didn't work:
<?= Modal::widget([
'id' => 'modal_view',
'size' => 'modal-lg',
'options' => [
'tabindex' => false, // important for Select2 to work properly
],
'clientOptions' => ['backdrop' => 'static', 'keyboard' => true]
]) ?>
For the ESC key to work correctly you need to set the tabindex="-1" for the bootstrap modal.
Don't know if you are assigning it false for the select2 to work correctly is because of layout issues? because for me it works correctly with -1. See image
So change your code to
<?= Modal::widget([
'id' => 'modal_view',
'size' => 'modal-lg',
'options' => [
'tabindex' => "-1",
],
'clientOptions' => ['backdrop' => 'static', 'keyboard' => true]
]) ?>
You can see this discussion for details.
EDIT
The issue you were facing is related to the focus.Bootstrap registers a listener to the focusin event which checks whether the focused element is either the overlay itself or a descendent of it
You can fix this by overwriting the enforceFocus function which registers the event on the modal.
Add the following line of javascript in your view
Bootstrap 3
$js=<<<JS
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
JS;
$this->registerJs($js, View::POS_READY);
Bootstrap 4
$js=<<<JS
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
JS;
$this->registerJs($js, View::POS_READY);
I'm using CakePHP Form helper to create form input fields. When a user edit an item, it will pre-fill the fields with data. I use v-model on each input field to make sure data is correctly populated.
It's all good for the textboxes as data is bound correctly. But for <select> fields, v-model doesn't seem to work. I've tried using default property for the Form->input() but no help. Here's some code:
<div class="fields">
<?= $this->Form->input('email', [
'label' => __('Email'),
'type' => 'email',
'v-model' => 'emailModel',
'placeholder' => __('Required'),
'#keydown.enter.stop.prevent' => 'return false;',
'#keyup.enter.stop.prevent' => 'onSubmit()'
]); ?>
<?= $this->Form->input('status', [
'label' => __('Status'),
'type' => 'select',
'default' => '{{userStatus}}',
'options' => [
1 => 'Active',
2 => 'Inactive'
],
'#keydown.enter.stop.prevent' => 'return false;',
'#keyup.enter.stop.prevent' => 'onSubmit()'
]); ?>
</div>
The email textbox has correct data filled, but not for the status selectbox. But if I replace {{userStatus}} with, for example, 2, it will set the default option to Inactive, even though {{userStatus}} itself has value 2.
How do I go about solving this?
I am new to VueJS but I came across the same question. The VueJS documentation states:
v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.
https://v2.vuejs.org/v2/guide/forms.html#Basic-Usage
Therefore, you need to assign your data.userStatus with your default value.
var vm = new Vue({
el: '#app',
data: {
statusModel: 2 // The default value goes here
}
});
PHP Side:
<div class="fields">
<?= $this->Form->input('email', [
'label' => __('Email'),
'type' => 'email',
'v-model' => 'emailModel',
'placeholder' => __('Required'),
'#keydown.enter.stop.prevent' => 'return false;',
'#keyup.enter.stop.prevent' => 'onSubmit()'
]); ?>
<?= $this->Form->input('status', [
'label' => __('Status'),
'type' => 'select',
'v-model' => 'statusModel',
'options' => [
1 => 'Active',
2 => 'Inactive'
],
'#keydown.enter.stop.prevent' => 'return false;',
'#keyup.enter.stop.prevent' => 'onSubmit()'
]); ?>
</div>
Hope this helps.
Is it possible to set certain options as selected in yii2 select2 widget from jquery. The widget is not initialised through js but it is bound to model attribute in form. Any help would be appreciated
Code:
echo $form->field($model, 'news_tags')->widget(Select2::classname(), [
'data' => ArrayHelper::map(app\models\Topics::findAll(['status' => 1]), 'tp_id', 'title'),
'options' => ['multiple' => true, 'placeholder' => 'Select Tags ...'],
'pluginOptions' => [
'tags' => false,
'allowClear' => true
],
])->label(FALSE);
I am trying to use an ajax call and on succes i want to add some tags from clientside.
As is presented in docs https://select2.github.io/examples.html#programmatic
you can use following code:
$("#form-field").val("5").trigger("change");
and it will select option, that has id 5
I am trying to make the text box of jui DatePicker in Yii2 look more like the other text boxes, by adding 'form-control' to the class name of the input control, when rendered.
I tried using clientOptions like this...
'clientOptions' => [ 'class' => 'form-control' ]
'clientOptions' => [ 'className' => 'form-control' ]
...and also as widget options, but am unable to figure this out.
Compared to Bootstrap Datetimepicker, the jui one looks really ugly.
Any ideas how I can add a class or make it look like other textboxes?
I have a simple datepicker, no fancy formattings, but am using it in my model.
Figured it out. It was simply...
'options' => ['class' => 'form-control']
It may be given like this.
<?= $form->field($model, 'client_name')->widget(
\yii\jui\AutoComplete::classname(),
[
'options' => ['class' => 'form-control'],
'clientOptions' => [
'source' => ['USA', 'RUS'],
],
]
)?>
I came across the same problem but
'options' => ['class' => 'form-control']
did not work for me. I resulted to using the CHtml argument called $htmlOptions which is basically an array that holds the attributes of the HTML element and it worked for me.
'htmlOptions'=>array('class'=>'form-control')
I'm pretty new with Yii2 and have the next unpleasant issue.
I created two forms at same page like
<?php $form = ActiveForm::begin([
// make sure you set the id of the form
'id' => 'create',
'action' => $action,
'options' => ['enctype' => 'multipart/form-data']
]); ?>
<?php $form = ActiveForm::begin([
// make sure you set the id of the form
'id' => 'update',
'action' => $action,
'options' => ['enctype' => 'multipart/form-data']
]); ?>
I use the same model for both form fields like
<?= $form->field($action_model, 'action_name',[
'addon' => ['prepend' => ['content'=>$action_model->getAttributeLabel('action_mobile')]]
])->widget(Typeahead::classname(), [
'options' => ['placeholder' => $action_model->getAttributeLabel('action_placeholder')],
'pluginOptions' => ['highlight'=>true],
'dataset' => [
[
'local' => Json::encode( $totalLookUp['action_lookUp'] ),
'limit' => 10
]
]
])->label(false);
?>
And here is the issue. In that case I have two forms with same scope of fields, with same names and same id. What for sure will be not valid for W3C. The another one issue that inspite of that fact that client side presubmit javascript validation for both forms work perfect. The typeahed widget works only for first set of fields since it bindid by id.
If i try to override elements id by specify it by widgets options like
<?= $form->field($action_model, 'action_name',[
'addon' => ['prepend' => ['content'=>$action_model->getAttributeLabel('action_mobile')]]
])->widget(Typeahead::classname(), [
'options' => ['id'=> $form_id.'_action_name',
'placeholder' => $action_model->getAttributeLabel('action_placeholder')],
'pluginOptions' => ['highlight'=>true],
'dataset' => [
[
'local' => Json::encode( $totalLookUp['action_lookUp'] ),
'limit' => 10
]
]
])->label(false);
?>
The typeahead works perfect, but in that case validation fails, I mean it just stop working.
So the questuion is, how to make possible adjust validation script and use unique form id's.
From the docs:
If you set a custom id for the input element, you may need to adjust the $selectors accordingly.
For your case:
$form->field($action_model, 'action_name', [
'selectors' => ['input' => '#'.$form_id.'_action_name'],
'addon' => ...