Tag Archive การแจ้งเตือน

แก้ validation error ใน YII 2

ฟอร์มของ yii จะมีการแจ้งเตือนถ้าหากพบว่าข้อมูล input ที่เรากรอกใน form ไม่ถูกต้อง โดยจะทำกรอบอินพุต ป้าย label เป็นสีแดงและมีข้อความแสดงใน help-block เพิ่มขึ้นมา บางครั้งก็ทำให้ฟอร์มที่จัดไว้แน่นๆ ไม่ใช่แบบบรรทัดละกล่องข้อความตามแบบเว็บสมัยใหม่ เวลาเจอความผิดพลาด มันก็จะถีบตัวอื่นออกไป หรือดูอัดแน่นเกินไปจนดูไม่สวย

ก็สามารถเอาออกได้โดยใช้ form template เหมือนเดิม โดยยังสามารถทำ validation ได้ตามปกติ

วิธีการคือ

  1. เปิดไฟล์ _form.php ใน view เป้าหมาย
  2. เปลี่ยน
    <?php $form = ActiveForm::begin(['id' => 'login-form']); ?>
    

    เป็น

    <?php $form = ActiveForm::begin([
        'fieldConfig' => [
            'template' => "{label}\n{input}\n{hint}"
        ],
        'id' => 'login-form'
    ]); ?>
    

อย่าลืมเปลี่ยน id นะครับ

ถ้าใช้

use yii\bootstrap\ActiveForm;

ให้เปลี่ยน template เป็น

'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{endWrapper}"

alert message จาก ajax

ส่วนติดต่อกับผู้ใช้ บางครั้งเราต้องตรวจสอบเงื่อนไขในหลายจุด ถ้าเจอแล้วส่ง message เป็น notification ต่างๆ ตาม contextual ต่างๆ ถ้ามีทั้งการแจ้งเตือน ทั้ง แจ้ง error ความผิดพลาด หลายจุด หลายเงื่อนไข ถ้าเราจะ redirect กลับไปกลับมาเพื่อแจ้ง user ก็ไม่สะดวก ทั้งที่ต้องกรอกข้อมูลใหม่ และความรู้สึกที่ว่า ทำไมไม่บอกมาซะให้หมดที่เดียว

ส่วนที่เป็น PHP เราก็เก็บ message ต่างๆ ไว้ใน array แล้วส่ง json กลับมาแล้วให้ function notification ใส่ bar แจ้งเตือน user message แต่ละประเภทอาจจะมีหลายข้อความ เราก็ใช้เป็น multidimensional array

<?php
$output['messages']['success'][] = 'Success! Well done its submitted.';
$output['messages']['info'][] = 'Info! take this info 1.';
$output['messages']['info'][] = 'Info! take this info 2.';
$output['messages']['warning'][] = 'Warning ! Dont submit this.';
$output['messages']['danger'] = 'Error ! Change few things.';

header('Content-Type: application/json; charset=utf-8');
echo json_encode($output);

ในฝั่ง ui ผมใช้แถบแจ้งเตือนของ bootsrtapt เป็นตัวอย่าง ถ้าใช้ framework อื่นก็แก้ code ด้วยครับ เวลาใช้จริงอย่าลืมแยกฟังก์ชั่น notification ไปไว้ในไฟล์ javascript ส่วนกลาง จะได้เรียกใช้ได้จากทุกหน้า

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap notification bar</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>alert under here</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
function notifications(notifications)
{
	html = '';
	$.each(notifications, function(type, messages)
	{
		if($.isArray(messages))
		{
			if(messages.length == 1)
			{
				html += '<div class="alert alert-'+type+'">'+messages[0]+'</div>';
			}
			else
			{
				html += '<div class="alert alert-'+type+'"><ul>';
				$.each(messages, function(ordered, message)
				{
					html += '<li>'+message+'</li>';
				});
				html += '</ul></div>';
			}
		}
		else
		{
			html += '<div class="alert alert-'+type+'">'+messages+'</div>';
		}
	});
	$('h1:eq(0)').after(html);
}

$(function(){
	$.ajax({
		dataType:'json',
		success : function(datas)
		{
			notifications(datas.messages);
		},
		url : 'alert.php'
	});
});
</script>
</body>
</html>