Validate select2 in yii2 - jquery-select2

Question

I have a textInput in _form.php. Then, I change it become select2. But after I change it, the validation is not working. What's the problem? How can I make a validation in select2 so that it cannot be blank?
This is the code:
_form.php
<?php
$formatJs = <<< 'JS'
var formatPenerima = function (penerima) {
if (penerima.loading) {
return penerima.text;
}
var markup =
'<div class="row">' +
'<div class="col-sm-4">' +
'<b style="margin-left:5px">' + penerima.text + '</b>' +
'</div>' +
'<div class="col-sm-3"><i class="fa fa-phone"></i> ' + penerima.telepon + '</div>' +
'<div class="col-sm-4"><i class="fa fa-envelope"></i> ' + penerima.mail + '</div>' +
'</div>';
return '<div style="overflow:hidden;">' + markup + '</div>';
};
var formatPenerimaSelection = function (penerima) {
return penerima.id || penerima.text;
}
JS;
// Register the formatting script
$this->registerJs($formatJs, \yii\web\View::POS_HEAD);
// Script to parse the results into the format expected by Select2
$resultsJs = <<< JS
function (data, params) {
params.page = params.page || 1;
return {
results: data.results, // check here
/*pagination: {
more: (params.page * 30) < data.total_count
}*/
};
}
JS;
$url = Url::to(['/paket/jsonlist']);
// Render your widget
// Get data from dummy data
echo $form->field($model, 'no_induk')->widget(Select2::className(), [
'name' => 'kv-repo-template',
'value' => '',
'initValueText' => '',
'options' => ['placeholder' => 'Cari pemilik ...', 'id' => 'pengambil'],
'pluginOptions' => [
'allowClear' => true,
'minimumInputLength' => 1,
'ajax' => [
'url' => $url,
'dataType' => 'json',
'delay' => 250,
'data' => new JsExpression('function(params) { return {q:params.term, page: params.page}; }'),
'processResults' => new JsExpression($resultsJs),
'cache' => true
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('formatPenerima'),
'templateSelection' => new JsExpression('formatPenerimaSelection'),
],
])->label('Pemilik');
?>
and this is my model rules:
public function rules()
{
return [
[['no_induk', 'nama', 'no_telepon', 'email', 'kategori_paket', 'nama_pengirim'/*, 'tanggal_sampai'*/],
'required', 'message' => '{attribute} tidak boleh kosong.'],
[['id_satpam_pengentry'], 'required', 'message' => 'Nama satpam tidak boleh kosong.'],
[['kategori_paket', 'status', 'id_satpam_pengentry', 'id_satpam_penyetuju'], 'integer'],
[['tanggal_sampai', 'tanggal_pengambilan'], 'safe'],
[['no_induk', 'email'], 'string', 'max' => 255],
[['nama', 'nama_pengirim', 'nama_pengambil'], 'string', 'max' => 128],
[['no_telepon'], 'string', 'max' => 64]
];
}

Answer 1

you can set "required = true" in the "options" array like this
'options' => ['placeholder' => 'Cari pemilik ...', 'class' => 'form-control', 'required' => true],

Answer 2

you have to put
class => "form-control" in your options and remove id, so validation will work

Answer 3

echo $form->field($model, 'no_induk')->widget(Select2::className(), [
'name' => 'kv-repo-template',
'value' => '',
'initValueText' => '',
'options' => ['placeholder' => 'Cari pemilik ...', 'class' => 'form-control'],
'pluginOptions' => [
'allowClear' => true,
'minimumInputLength' => 1,
'ajax' => [
'url' => $url,
'dataType' => 'json',
'delay' => 250,
'data' => new JsExpression('function(params) { return {q:params.term, page: params.page}; }'),
'processResults' => new JsExpression($resultsJs),
'cache' => true
],
'escapeMarkup' => new JsExpression('function (markup) { return markup; }'),
'templateResult' => new JsExpression('formatPenerima'),
'templateSelection' => new JsExpression('formatPenerimaSelection'),
],
])->label('Pemilik');