#fieldrange

New Post has been published on http://webtips.krajee.com/model-range-validation-with-yii2-field-range-extension/

Model range validation along with yii2-field-range extension

The yii2-field-range extension enables you to easily setup ActiveField range fields with Bootstrap styling. You basically can setup two attributes joined together like a single field with combined validation error block.

Here are a few tips on configuring model validation rules for your two attributes using this extension:

Validation Scenario 1: Field 1 should not equal Field 2

Let’s consider the first example on the extension demo site. You have two attributes configured with a dropDownList named start_place and end_place. Your start_place and end_place should not be same when selected either way. In order to do this, setup the following validation rules in your model:

public function rules() return [ [ ['start_place'], 'compare', 'compareAttribute'=>'end_place', 'operator'=>'!=', 'skipOnEmpty'=>true ], [ ['end_place'], 'compare', 'compareAttribute'=>'start_place', 'operator'=>'!=' ], ];

As seen, the skipOnEmpty for start_place allows the validation to be deferred until end_place is entered.

Validation Scenario 2: Attribute 2 cannot be less than Attribute 1

Similarly, let’s look at the second example in the extension demo site. You have two attributes configured: from_amount and to_amount. For this scenario, let’s say following rules are needed:

Both amounts are required

Both amounts must be numeric/decimals.

Both amounts cannot exceed zero.

The to_amount cannot be less than from_amount.

To achieve all of the above, setup the following validation rules in your model:

public function rules() return [ [['from_amount', 'to_amount'], 'required'], [['from_amount', 'to_amount'], 'double', 'min'=>0], [ ['from_amount'], 'compare', 'compareAttribute'=>'to_amount', 'operator'=>'<=', 'skipOnEmpty'=>true ], [ ['to_amount'], 'compare', 'compareAttribute'=>'from_amount', 'operator'=>'>=' ], ];

New Post has been published on http://webtips.krajee.com/advanced-bootstrap-styled-form-layouts-yii2-field-range-extension/

Advanced Bootstrap styled form layouts with yii2-field-range extension

This wiki will explain how you can use the yii2-field-range extension with multiple Bootstrap form layouts – vertical or horizontal.

About yii2-field-range

The yii2-field-range extension extension allows you to easily setup ActiveField range fields with Bootstrap 3 addons markup and more. You can thus setup the form attributes joined together like a single field with a bootstrap addon separating the two. In addition, it enables you to display the field validation error messages as one single block instead of separate validation errors for two fields.

Vertical Form Layout

By default the widget supports the bootstrap 3 vertical form layout. In order to display the label and the field range block in a vertical form layout, you need to just provide the following properties to the widget:

form

label

This will render the widget correctly for any widget extended from yii\widgets\ActiveForm including kartik\widgets\ActiveForm or yii\bootstrap\ActiveForm.

Horizontal Form Layout

Rendering the Bootstrap 3 horizontal form layout with a field range is always tricky, since there are more than two fields joined together, and the alignment is not always perfect. However, the yii2-field-range extension has been enhanced to support horizontal form layout by default for \kartik\widgets\ActiveForm and allows you to easily define your markup for other form widgets based on yii\widgets\ActiveForm.

Your options for a horizontal form layout are:

Option 1 – Using \kartik\widgets\ActiveForm

This is the most straightforward direct approach. An example of using the FieldRange widget with date input validation using kartik\widgets\DateControl in a horizontal form layout is mentioned below:

use kartik\widgets\ActiveForm; $form = ActiveForm::begin([ 'type' => ActiveForm::TYPE_HORIZONTAL, 'formConfig' => [ 'labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL ], ]); echo $form->field($model, 'username'); echo FieldRange::widget([ 'form' => $form, 'model' => $model, 'label' => 'Enter date range', 'attribute1' => 'from_date_1', 'attribute2' => 'to_date_1', 'type' => FieldRange::INPUT_WIDGET, 'widgetClass' => DateControl::classname(), 'widgetOptions1' => [ 'saveFormat'=>'U', 'options'=>[ 'pluginOptions' => ['autoclose' => true,], ], ], 'widgetOptions2' => [ 'saveFormat'=>'U', 'options'=>[ 'pluginOptions' => ['autoclose' => true,], ], ], ]); ActiveForm::end();

Option 2 – Using other ActiveForm widgets

If you are using the yii\bootstrap\ActiveForm or yii\widgets\ActiveForm, there is no inbuilt option in the widget, but you can easily render the horizontal layout using the following approach. Basically you set useAddons property to false, and setup the CSS classes for horizontal layout, within labelOptions, widgetContainer, and errorContainer as shown below: