বুটস্ট্রাপ ৫ এ Validation এবং Custom Error Messages ব্যবহারের মাধ্যমে আপনি আপনার ফর্মের ইনপুটগুলোর সঠিকতা পরীক্ষা করতে পারেন এবং ব্যবহারকারীকে নির্দিষ্ট ত্রুটি বার্তা প্রদান করতে পারেন। বুটস্ট্র্যাপের প্রি-বিল্ট validation ক্লাস এবং সিএসএস এর মাধ্যমে ফর্মের ইন্টিগ্রিটি নিশ্চিত করা খুবই সহজ। এটি ব্যবহারকারীকে সঠিক ইনপুট দিতে সহায়তা করে এবং ভুল ইনপুট দিলে সহজেই ভুলগুলি চিহ্নিত করে দেখায়।
বুটস্ট্রাপ ৫ এ ফর্মের ইনপুট ফিল্ডগুলির জন্য HTML5 validation অ্যাট্রিবিউটসমূহ এবং Bootstrap validation classes ব্যবহার করা হয়। required, pattern, minlength, maxlength ইত্যাদি বৈশিষ্ট্যগুলি ব্যবহার করে ইনপুট ফিল্ডে ভ্যালিডেশন প্রয়োগ করা যায়।
Required validation: ইনপুট ফিল্ডটি অবশ্যই পূর্ণ হতে হবে।
Pattern validation: ইনপুটের মান একটি নির্দিষ্ট প্যাটার্ন অনুসরণ করতে হবে।
minlength এবং maxlength: ইনপুটের সর্বনিম্ন এবং সর্বোচ্চ দৈর্ঘ্য নির্ধারণ করা।
<form>
<div class="mb-3">
<label for="name" class="form-label">নাম</label>
<input type="text" class="form-control" id="name" required>
<div class="invalid-feedback">
নামটি অবশ্যই পূর্ণ করতে হবে।
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">ইমেইল</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">
সঠিক ইমেইল ঠিকানা প্রদান করুন।
</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">পাসওয়ার্ড</label>
<input type="password" class="form-control" id="password" minlength="6" required>
<div class="invalid-feedback">
পাসওয়ার্ড কমপক্ষে ৬ অক্ষরের হতে হবে।
</div>
</div>
<button type="submit" class="btn btn-primary">সাবমিট</button>
</form>
এই কোডে, invalid-feedback ক্লাস ব্যবহার করে আপনি কাস্টম ত্রুটি বার্তা প্রদর্শন করতে পারেন। যখন ব্যবহারকারী ভুল ইনপুট দেয়, তখন এটি প্রদর্শিত হবে।
বুটস্ট্রাপ ৫ ফর্মে validation classes প্রদান করে যা আপনার ফর্মের ইনপুটগুলোকে সঠিকভাবে যাচাই করতে সহায়তা করে। বুটস্ট্রাপের was-validated ক্লাস ব্যবহৃত হলে, ইনপুট ফিল্ডের ত্রুটি হলে তা স্বয়ংক্রিয়ভাবে দেখানো হয়।
বুটস্ট্রাপ ৫ এর ইনপুট ফিল্ডগুলির জন্য দুইটি প্রধান স্টেট রয়েছে: valid এবং invalid। এটি ফিল্ডের সঠিকতা দেখাতে ব্যবহৃত হয়।
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="username" class="form-label">ব্যবহারকারীর নাম</label>
<input type="text" class="form-control is-invalid" id="username" required>
<div class="invalid-feedback">
ব্যবহারকারীর নামটি আবশ্যক।
</div>
</div>
<div class="mb-3">
<label for="email" class="form-label">ইমেইল</label>
<input type="email" class="form-control is-valid" id="email" required>
<div class="valid-feedback">
সঠিক ইমেইল ঠিকানা।
</div>
</div>
<button type="submit" class="btn btn-primary">সাবমিট</button>
</form>
is-valid: ইনপুট সঠিক হলে ব্যবহৃত হয়।is-invalid: ইনপুট ভুল হলে ব্যবহৃত হয়।যখন একটি ফর্ম ফিল্ডের ইনপুট ভুল হয়, তখন invalid-feedback ক্লাস ব্যবহার করে কাস্টম ত্রুটি বার্তা প্রদর্শিত হয়। আপনি এখানে আপনার নিজের বার্তা লিখতে পারেন যা ব্যবহারকারীকে সঠিক ইনপুট দেওয়ার জন্য নির্দেশনা দেয়।
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="email" class="form-label">ইমেইল</label>
<input type="email" class="form-control" id="email" required>
<div class="invalid-feedback">
দয়া করে একটি সঠিক ইমেইল ঠিকানা দিন।
</div>
</div>
<button type="submit" class="btn btn-primary">সাবমিট</button>
</form>
এখানে, invalid-feedback ক্লাসের মাধ্যমে ব্যবহারকারীর ভুল ইনপুটের জন্য কাস্টম বার্তা প্রদর্শিত হবে।
বুটস্ট্রাপ ৫ এর ফর্ম ভ্যালিডেশন কেবল HTML5 এর ইনপুট বৈশিষ্ট্যের মাধ্যমে কাজ করে না, এতে JavaScript কোডও যুক্ত করা যায়, যা ফর্মের সবগুলো ইনপুট যাচাই করতে সহায়তা করে।
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="username" class="form-label">ব্যবহারকারীর নাম</label>
<input type="text" class="form-control" id="username" required>
<div class="invalid-feedback">
ব্যবহারকারীর নাম আবশ্যক।
</div>
</div>
<button type="submit" class="btn btn-primary">সাবমিট</button>
</form>
<script>
(function() {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function(form) {
form.addEventListener('submit', function(event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
এই কোডটি JavaScript ব্যবহার করে ফর্মের ইনপুটের সঠিকতা পরীক্ষা করে এবং ত্রুটি থাকলে সেগুলো দেখায়।
বুটস্ট্রাপ ৫ এ ফর্মের validation এবং custom error messages এর মাধ্যমে আপনি সহজেই আপনার ওয়েব ফর্মগুলোকে ব্যবহারকারী বান্ধব এবং সঠিক ইনপুট সংগ্রহ করার উপযোগী করতে পারেন। HTML5 এর ইনপুট বৈশিষ্ট্য এবং বুটস্ট্রাপের স্টাইলিং ক্লাসসমূহ একত্রে ব্যবহৃত হলে, ত্রুটি সনাক্তকরণ এবং ব্যবহারকারীকে সঠিক ইনপুট প্রদানের জন্য কার্যকরী সমাধান পাওয়া যায়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
