Quartz 5

5. Client Side Validations

4 min read

হ্যালো হাসিব! এই লেকচারে আমরা একটি খুবই গুরুত্বপূর্ণ এবং ইউজার-ফ্রেন্ডলি ফিচার নিয়ে কাজ করেছি: Client-Side Validation। এর আগে আমরা দেখেছি ফর্মে ভুল ডাটা দিলে তা সার্ভারে সাবমিট হতো, সার্ভার চেক করে তারপর এরর দেখাতো। এটি স্লো এবং সার্ভারের জন্য প্রেসার। এই লেকচারে আমরা শিখেছি কীভাবে JavaScript (jQuery) ব্যবহার করে পেজ রিলোড ছাড়াই, ইউজার টাইপ করার সাথে সাথেই ব্রাউজারে ভ্যালিডেশন এরর দেখানো যায়।

চলো লেকচারটির একটি কুইক সামারি দেখে নিই।

📌 Quick Summary for Revision

  • Why Client-Side Validation? সার্ভারে রিকোয়েস্ট পাঠানোর আগেই ব্রাউজারে ভ্যালিডেশন চেক করা, যাতে সার্ভারের রিসোর্স বাঁচে এবং ইউজার সাথে সাথে ফিডব্যাক পায়।
  • How it Works (The 3 Steps): 1. মডেলে Data Annotations ([Required], [EmailAddress]) দেওয়া থাকতে হবে।
  1. ভিউতে asp-for Tag Helper ব্যবহার করতে হবে, যা data-val-... অ্যাট্রিবিউট তৈরি করবে।
  2. ভিউয়ের নিচে ৩টি নির্দিষ্ট jQuery স্ক্রিপ্ট ইমপোর্ট করতে হবে।
  • The 3 Required Scripts: jquery.js, jquery.validate.js, এবং jquery.validate.unobtrusive.js (অবশ্যই এই সিরিয়ালে লোড করতে হবে)।
  • Showing Errors: প্রতিটি ফিল্ডের নিচে এরর দেখানোর জন্য asp-validation-for="PropertyName" এবং সব এরর একসাথে দেখানোর জন্য asp-validation-summary="All" ব্যবহার করা।

🚀 Comprehensive Breakdown & The “Why”

নিচে লেকচারের প্রতিটি কনসেপ্ট বিস্তারিত এবং কারণসহ এক্সপ্লেইন করা হলো:

১. Client-Side Validation কীভাবে কাজ করে? [Priority: 10/10]

The “Why”: ASP.NET Core-এ Client-Side Validation কোনো ম্যাজিক নয়। যখন আমরা ভিউতে asp-for="PersonName" লিখি এবং মডেলে [Required] থাকে, তখন ফ্রেমওয়ার্ক HTML-এ কিছু data- অ্যাট্রিবিউট তৈরি করে দেয়। যেমন: <input data-val="true" data-val-required="Name cannot be blank" /> এখন আমাদের এমন একটি জাভাস্ক্রিপ্ট কোড দরকার, যে এই data-val অ্যাট্রিবিউটগুলো পড়বে এবং ফর্ম সাবমিট হতে বাধা দিয়ে এরর দেখাবে। এই কাজটিই করে jQuery Unobtrusive Validation লাইব্রেরি।

২. Scripts Import করা (CDN) [Priority: 10/10]

The “Why”: এই ভ্যালিডেশন কাজ করানোর জন্য ৩টি জাভাস্ক্রিপ্ট ফাইল দরকার। এদের সিকোয়েন্স খুবই ইম্পর্ট্যান্ট, কারণ একটি আরেকটির ওপর নির্ভরশীল।

  1. jQuery: বেস লাইব্রেরি যা DOM ম্যানিপুলেট করে।
  2. jQuery Validate: এটি ফর্ম ভ্যালিডেশনের কোর প্লাগইন, কিন্তু এটি ASP.NET এর data-val বোঝে না।
  3. jQuery Validate Unobtrusive: এটি মাইক্রোসফটের তৈরি একটি ব্রিজ। এটি data-val রিড করে jQuery Validate-কে বলে দেয় কী করতে হবে।

Implementation (Create.cshtml এর একদম নিচে):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.4/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.12/jquery.validate.unobtrusive.min.js"></script>

নোট: লেকচারার CDN ব্যবহার করেছেন যাতে ফাইলগুলো ব্রাউজারে ক্যাশ (Cross-site caching) হয়ে যায় এবং ফাস্ট লোড হয়।

৩. Error Message দেখানো (asp-validation-for) [Priority: 10/10]

The “Why”: ভ্যালিডেশন ফেইল করলে jQuery একটি এরর মেসেজ তৈরি করে। কিন্তু সেই মেসেজটি কোথায় দেখাবে? এর জন্য আমাদের <span asp-validation-for="..."> ব্যবহার করতে হয়। jQuery অটোমেটিক্যালি এই স্প্যানের ভেতরে এরর মেসেজটি ঢুকিয়ে দেয়।

Implementation:

<div class="flex-1">
    <input asp-for="PersonName" class="form-input" />
    
    <span asp-validation-for="PersonName" class="text-red"></span>
</div>

৪. Validation Summary (asp-validation-summary) [Priority: 8/10]

The “Why”: যদি ফর্মে অনেকগুলো ফিল্ড থাকে, তখন ইউজার বুঝতে পারে না কোথায় ভুল হয়েছে। তাই সাবমিট বাটনের নিচে সব এরর একসাথে একটি লিস্ট আকারে দেখানোর জন্য এটি ব্যবহার করা হয়।

Implementation (সাবমিট বাটনের নিচে):

<div asp-validation-summary="All" class="text-red"></div>

🆕 .NET 10 & Modern Approaches (Partial View for Scripts)

লেকচারে স্ক্রিপ্টগুলো সরাসরি Create.cshtml-এ লেখা হয়েছে। মডার্ন ASP.NET Core প্রোজেক্টে এই ৩টি স্ক্রিপ্টের লিংক _ValidationScriptsPartial.cshtml নামের একটি Partial View-তে রাখা থাকে (যা প্রজেক্ট তৈরি করার সময়ই অটোমেটিক জেনারেট হয়)। ভিউয়ের নিচে শুধু ওই Partial View-টি কল করাটাই বেস্ট প্র্যাকটিস, যাতে বারবার এত বড় URL কপি-পেস্ট করতে না হয়।

Modern Approach (in Create.cshtml):

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

এই @section Scripts লেআউটের একদম শেষে রেন্ডার হয়, যা পেজ লোডিং স্পিড বাড়ায়।

💡 Best Practices (Validation & DRY Principle)

১. The DRY Principle: লেকচারার শেষে খুব সুন্দর একটি কথা বলেছেন—ASP.NET Core DRY (Don’t Repeat Yourself) ফলো করে। তুমি ভ্যালিডেশন রুল শুধু এক জায়গায় (Model Class-এ Data Annotation হিসেবে) লিখবে। ফ্রেমওয়ার্ক ওই এক রুল দিয়েই সার্ভার-সাইড এবং ক্লায়েন্ট-সাইড—দুই জায়গাতেই ভ্যালিডেশন করবে! ২. Always Keep Server-Side Validation: Client-Side Validation শুধু ইউজার এক্সপেরিয়েন্স ভালো করার জন্য। হ্যাকাররা Postman বা ব্রাউজারের জাভাস্ক্রিপ্ট অফ করে সরাসরি সার্ভারে রিকোয়েস্ট পাঠাতে পারে। তাই Controller-এ ModelState.IsValid চেক করা কখনোই বাদ দেওয়া যাবে না। Client-Side এবং Server-Side দুটোই থাকতে হবে। ৩. Dropdown Validation: ড্রপডাউনে ডিফল্ট অপশনের ভ্যালু ফাঁকা (value="") রাখতে হবে। মডেলে [Required] দেওয়া থাকলে, ইউজার “Please Select” অবস্থায় ফর্ম সাবমিট করতে চাইলে Client-Side ভ্যালিডেশন তাকে আটকে দেবে (যেমনটা লেকচারে Country ID এর ক্ষেত্রে দেখানো হয়েছে)।

Client-Side Validation-এর চমৎকার এই ফিচারটি তো আমরা শিখে নিলাম। এরপর কি আমরা Edit Person পেজের কাজ শুরু করবো?

Graph View

Backlinks