Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা স্টাইলিংয়ের জন্য অনেক শক্তিশালী কম্পোনেন্ট প্রদান করে, তবে এটি ফর্ম ভ্যালিডেশন এবং কাস্টম এরর মেসেজগুলির জন্য সরাসরি কোনো জাভাস্ক্রিপ্ট সমর্থন প্রদান করে না। তবে, আপনি সহজে Pure.CSS এর সাথে HTML5 form validation এবং কাস্টম error messages ব্যবহার করতে পারেন। আমরা এখানে Pure.CSS ফর্ম স্টাইলিং এবং form validation এবং custom error messages সেট আপ করার জন্য কিছু উদাহরণ দেখাবো।
1. HTML5 Form Validation
HTML5 ফর্ম ভ্যালিডেশন এর মাধ্যমে আপনি সহজেই ফর্ম ফিল্ডের ইনপুট যাচাই করতে পারেন, যেমন required, email, minlength, pattern, ইত্যাদি।
Form Validation Example with Pure.CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styling for the Form */
.form-container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.pure-button-primary {
width: 100%;
background-color: #4CAF50;
color: white;
}
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
.error-message {
color: red;
font-size: 0.9em;
display: none;
}
input:invalid + .error-message {
display: block;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Form</h2>
<form class="pure-form pure-form-aligned" action="#">
<div class="pure-control-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required placeholder="Enter your name">
<span class="error-message">Name is required</span>
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">
<span class="error-message">Please enter a valid email address</span>
</div>
<div class="pure-control-group">
<label for="message">Message</label>
<textarea id="message" name="message" required placeholder="Enter your message"></textarea>
<span class="error-message">Message is required</span>
</div>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
</body>
</html>
ব্যাখ্যা:
- HTML5 Validation:
required: এই অ্যাট্রিবিউট ব্যবহার করা হয়েছে, যা ফিল্ডটি পূর্ণ না থাকলে সাবমিট করতে দেবে না।type="email": এটি ইমেল ফিল্ডের জন্য একটি বিল্ট-ইন ভ্যালিডেশন যোগ করে।- Input Validity:
input:validএবংinput:invalidসিলেক্টর ব্যবহার করা হয়েছে, যাতে ইনপুট ফিল্ডের সঠিকতা যাচাই করা যায় এবং স্টাইল দেওয়া যায় (যেমন, রেড বা গ্রীন বর্ডার)।
- Custom Error Messages:
- Error message display:
span.error-messageযোগ করা হয়েছে, যা তখনই প্রদর্শিত হবে যখন ইনপুট ফিল্ডটি সঠিকভাবে পূর্ণ না হবে। input:invalid + .error-message: এই সিলেক্টরটি নিশ্চিত করে যে ইনপুট ফিল্ডটি যদি অবৈধ হয়, তবে এর পরবর্তী স্লাইডে থাকা এরর মেসেজটি দেখাবে।
- Error message display:
2. Custom Error Messages Using JavaScript
Pure.CSS মূলত CSS ফ্রেমওয়ার্ক, এবং এটি সরাসরি জাভাস্ক্রিপ্টের সাহায্য ছাড়া কাস্টম এরর মেসেজ প্রদর্শন করতে পারে না। তবে, আপনি JavaScript ব্যবহার করে কাস্টম এরর মেসেজ এবং ভ্যালিডেশন করতে পারেন।
Custom Error Messages Example with JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Error Messages in Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
.form-container {
width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.pure-button-primary {
width: 100%;
background-color: #4CAF50;
color: white;
}
.error-message {
color: red;
font-size: 0.9em;
display: none;
}
.pure-control-group input:invalid {
border-color: red;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Form</h2>
<form class="pure-form pure-form-aligned" id="contact-form">
<div class="pure-control-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required placeholder="Enter your name">
<span class="error-message" id="name-error">Name is required</span>
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required placeholder="Enter your email">
<span class="error-message" id="email-error">Please enter a valid email address</span>
</div>
<div class="pure-control-group">
<label for="message">Message</label>
<textarea id="message" name="message" required placeholder="Enter your message"></textarea>
<span class="error-message" id="message-error">Message is required</span>
</div>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</div>
<script>
document.getElementById('contact-form').addEventListener('submit', function(event) {
event.preventDefault();
var isValid = true;
// Name validation
var name = document.getElementById('name');
var nameError = document.getElementById('name-error');
if (name.value === '') {
nameError.style.display = 'block';
isValid = false;
} else {
nameError.style.display = 'none';
}
// Email validation
var email = document.getElementById('email');
var emailError = document.getElementById('email-error');
if (!email.validity.valid) {
emailError.style.display = 'block';
isValid = false;
} else {
emailError.style.display = 'none';
}
// Message validation
var message = document.getElementById('message');
var messageError = document.getElementById('message-error');
if (message.value === '') {
messageError.style.display = 'block';
isValid = false;
} else {
messageError.style.display = 'none';
}
if (isValid) {
alert('Form submitted successfully!');
}
});
</script>
</body>
</html>
ব্যাখ্যা:
- Custom JavaScript Validation: এখানে ফর্মটি সাবমিট হওয়ার আগেই JavaScript ব্যবহার করে ফিল্ডগুলি যাচাই করা হচ্ছে। প্রতিটি ফিল্ড যদি ভুলভাবে পূর্ণ হয়, তবে তাতে কাস্টম এরর মেসেজ দেখানো হবে।
- Error Message Display:
span.error-messageদ্বারা কাস্টম এরর মেসেজগুলি তৈরি করা হয়েছে, যা ইনপুট ফিল্ডের পাশে প্রদর্শিত হবে যখন তা সঠিকভাবে পূর্ণ হবে না। - Form Submit Logic: ফর্মটি যখন সাবমিট হয়, তখন ফিল্ডগুলো যাচাই করা হয় এবং যদি কোনো ত্রুটি পাওয়া যায়, তবে তা
display: block;করে এরর মেসেজ দেখানো হয়।
- HTML5 Form Validation এবং Custom Error Messages ব্যবহার করে Pure.CSS এর সাথে সুন্দরভাবে স্টাইল করা ফর্ম তৈরি করা যায়। HTML5 ফিচারগুলির মাধ্যমে সহজেই ইনপুট যাচাই করা যায়, এবং Pure.CSS-এ ফর্মের ইনপুট ফিল্ডের স্টাইল কাস্টমাইজ করা যেতে পারে।
- আপনি যদি আরও উন্নত কাস্টম ভ্যালিডেশন বা এরর মেসেজ চান, তবে JavaScript ব্যবহার করে নিজস্ব ফর্ম ভ্যালিডেশন তৈরি করতে পারেন।
Content added By
Read more
