Materialize CSS ফ্রেমওয়ার্কটি ওয়েব ফর্ম তৈরি করার জন্য অনেক কার্যকরী কম্পোনেন্ট এবং বৈশিষ্ট্য প্রদান করে, এর মধ্যে রয়েছে form validation (ফর্ম ভ্যালিডেশন) এবং custom error messages (কাস্টম এরর মেসেজ)। এই দুটি বৈশিষ্ট্য ব্যবহার করে আপনি আপনার ফর্মে সহজে ইনপুট ভ্যালিডেশন এবং ব্যবহারকারীর জন্য পরিষ্কার এবং কাস্টম এরর মেসেজ তৈরি করতে পারবেন।
Form Validation
Form validation হল একটি প্রক্রিয়া যেখানে ফর্মের ইনপুটগুলি যাচাই করা হয়, যাতে ইউজার সঠিক তথ্য প্রদান করেছে তা নিশ্চিত করা যায়। Materialize CSS এর মাধ্যমে আপনি সহজেই ফর্মের ইনপুট এলিমেন্টে ভ্যালিডেশন অ্যাড করতে পারেন।
Materialize CSS এর মাধ্যমে ফর্ম ভ্যালিডেশন
Materialize CSS এ HTML5 validation এবং JavaScript এর মাধ্যমে ফর্ম ভ্যালিডেশন করা সম্ভব। এটি ইনপুট ফিল্ডে required, pattern, email ইত্যাদি ভ্যালিডেশন ব্যবহার করার মাধ্যমে করতে পারেন।
উদাহরণ: HTML5 Form Validation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h4>Login Form</h4>
<form id="login-form">
<div class="input-field">
<input id="email" type="email" class="validate" required>
<label for="email">Email</label>
<span class="helper-text" data-error="Invalid email address" data-success="Valid email"></span>
</div>
<div class="input-field">
<input id="password" type="password" class="validate" required>
<label for="password">Password</label>
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
// Initialize form validation
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
});
</script>
</body>
</html>
এই উদাহরণে, email এবং password ফিল্ডে required এবং email ভ্যালিডেশন ব্যবহার করা হয়েছে। যখন ইউজার ভুল ইনপুট দিবে, তখন Materialize স্বয়ংক্রিয়ভাবে এরর মেসেজ দেখাবে।
Custom Error Messages
Materialize CSS ফ্রেমওয়ার্কে আপনি custom error messages তৈরি করতে পারেন, যাতে ব্যবহারকারীরা কোন ভুল করেছেন তা সহজে বুঝতে পারে। আপনি JavaScript বা HTML5 এর মাধ্যমে কাস্টম এরর মেসেজ দিতে পারেন।
উদাহরণ: Custom Error Message
<div class="input-field">
<input id="email" type="email" class="validate" required>
<label for="email">Email</label>
<span class="helper-text" data-error="Please enter a valid email address" data-success="Looks good!"></span>
</div>
এখানে, data-error এবং data-success অ্যাট্রিবিউট ব্যবহার করে কাস্টম মেসেজ তৈরি করা হয়েছে:
- data-error: যখন ইনপুটটি সঠিক না হবে, তখন এটি ইউজারকে এরর মেসেজ দেখাবে।
- data-success: যখন ইনপুটটি সঠিক হবে, তখন এটি ইউজারকে সাফল্যের মেসেজ দেখাবে।
উদাহরণ: Custom Error Message Using JavaScript
<div class="input-field">
<input id="username" type="text" class="validate" required>
<label for="username">Username</label>
<span id="username-error" class="helper-text" style="color: red;"></span>
</div>
<script>
document.getElementById('username').addEventListener('blur', function() {
var username = document.getElementById('username').value;
if (username.length < 5) {
document.getElementById('username-error').textContent = "Username must be at least 5 characters long.";
} else {
document.getElementById('username-error').textContent = "";
}
});
</script>
এই উদাহরণে, JavaScript এর মাধ্যমে কাস্টম এরর মেসেজ তৈরি করা হয়েছে। যখন ইউজার username ইনপুট ফিল্ডে ৫টি ক্যারেক্টার কম লিখবেন, তখন একটি কাস্টম এরর মেসেজ প্রদর্শিত হবে।
Form Validation এবং Custom Error Message এর কাজের মূল উপকারিতা
- ব্যবহারকারী অভিজ্ঞতা উন্নত করা: ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ ইউজারের জন্য একটি পরিষ্কার নির্দেশনা প্রদান করে, যাতে তারা দ্রুত এবং সঠিকভাবে ফর্ম পূর্ণ করতে পারে।
- সহজ কাস্টমাইজেশন: Materialize CSS এর মাধ্যমে আপনি সহজেই কাস্টম মেসেজ কনফিগার করতে পারেন, যা আপনার ডিজাইন এবং থিমের সাথে সঙ্গতিপূর্ণ হবে।
- রিয়েল-টাইম ইনপুট যাচাই: JavaScript ব্যবহার করে আপনি ইনপুট যাচাই রিয়েল-টাইমে করতে পারবেন এবং সঠিক তথ্য পেলে ব্যবহারকারীদের ত্রুটি মেসেজ কমিয়ে সাফল্যের মেসেজ দেখাতে পারবেন।
Materialize CSS এর মাধ্যমে ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজ তৈরি করা সহজ, যা আপনার ওয়েবসাইটের ইউজার ইন্টারফেসকে আরও কার্যকরী এবং ব্যবহারকারী-বান্ধব করে তোলে।
Read more
