Использование виджета CMaskedTextField

Для повышения удобства и наглядности ввода значения в поле может послужить виджет CMaskedTextField.
В качестве примера рассмотрим поле для ввода телефонного номера.

Зачастую, номер телефона (вместе с кодом) вводится в одно текстовое поле.
И, если не добавить подсказку о том, в каком формате следует указать свой телефон,
то посетитель может довольно долго подбирать корректный вариант.

Чтобы помочь посетителю сайта с вводом правильного значения, которое пройдёт валидацию,
и сэкономить его время, на помощь придёт виджет CMaskedTextField.

В представлении запишем:

<div class="row">
	<?php echo $form->labelEx($model,'phone'); ?>
	<?php
		$this->widget('CMaskedTextField', array(
			'model' => $model,
			'attribute' => 'phone',
			'mask' => '+7-999-999-9999',
			'placeholder' => '*',
			'completed' => 'function(){console.log("ok");}',
		));
		?>
	<?php echo $form->error($model,'phone'); ?>
</div>
  • mask: маска ввода,
  • placeholder: символы до ввода значений пользователем, в данном случае: *,
  • completed: JavaScript функция, которая срабатывает после завершения ввода пользователем.

В модели будем проверять введённое значение по регулярному выражению:

array(
	'phone',
	'match',
	'pattern' => '/^((\+?7)(-?\d{3})-?)?(\d{3})(-?\d{4})$/',
	'message' => 'Некорректный формат поля {attribute}'
),

{attribute} заменяется именем поля при возникновении в данном поле ошибки.

Кстати, regexlib.com — сайт с примерами регулярных выражений на все случаи жизни.

Стоит изучить


  • Автор: Сергей Жолобов, Xpycm (monoray.ru).