ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক যা ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরির জন্য ব্যবহৃত হয়। Forms এবং Form Validation ExtJS এর গুরুত্বপূর্ণ অংশ, যেগুলি অ্যাপ্লিকেশনের ইনপুট ডেটা সংগ্রহ এবং যাচাইকরণের জন্য ব্যবহৃত হয়। Forms সাধারণত ব্যবহারকারীর ইনপুট নেওয়ার জন্য ব্যবহৃত হয় এবং Form Validation নিশ্চিত করে যে ইনপুট ডেটা সঠিক, পূর্ণাঙ্গ এবং ভ্যালিড।
ExtJS Form হল একটি UI কম্পোনেন্ট যা বিভিন্ন ইনপুট ফিল্ড (যেমন: টেক্সট ফিল্ড, চেকবক্স, রেডিও বাটন, কম্বো বক্স) ধারণ করে, যা ব্যবহারকারীর ইনপুট গ্রহণ করে। ফর্মটি সাধারণত Ext.form.Panel কম্পোনেন্টের মাধ্যমে তৈরি করা হয়।
Ext.create('Ext.form.Panel', {
title: 'User Registration',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'firstName',
fieldLabel: 'First Name',
allowBlank: false // এই ফিল্ডটি ফাঁকা থাকতে পারবে না
},
{
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name',
allowBlank: false
},
{
xtype: 'emailfield',
name: 'email',
fieldLabel: 'Email',
vtype: 'email', // ভ্যালিড ইমেইল ফরম্যাট চেক করা হবে
allowBlank: false
},
{
xtype: 'textfield',
name: 'phone',
fieldLabel: 'Phone',
allowBlank: true // এই ফিল্ডটি ফাঁকা থাকতে পারে
}
],
buttons: [
{
text: 'Submit',
formBind: true, // ফর্মের ফিল্ডগুলো পূর্ণ হলে সাবমিট হবে
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert('Success', 'Form is valid!');
} else {
Ext.Msg.alert('Error', 'Form contains invalid data');
}
}
}
]
});
উদাহরণ ব্যাখ্যা:
xtype: 'textfield': একটি সাধারণ টেক্সট ইনপুট ফিল্ড।name: ইনপুট ফিল্ডের নাম, যা ডেটা সাপোর্ট করে।fieldLabel: ইনপুট ফিল্ডের লেবেল।allowBlank: এই ফিল্ডটি ফাঁকা থাকতে পারবে কিনা।vtype: ভ্যালিডেশন টাইপ, যেমন এখানে ইমেইল ইনপুট ফিল্ডে সঠিক ইমেইল ফরম্যাট যাচাই করা হচ্ছে।formBind: সাবমিট বাটনটি শুধুমাত্র তখনই সক্রিয় হবে যখন ফর্মটি সঠিকভাবে পূর্ণ হবে।Form Validation হল একটি প্রক্রিয়া যা ব্যবহারকারীর ইনপুট যাচাই করে নিশ্চিত করে যে এটি সঠিক, পূর্ণ এবং ভ্যালিড। ExtJS ফর্মে বিভিন্ন ধরনের ভ্যালিডেশন অপশন রয়েছে, যেমন required fields, email validation, length validation, range validation, custom validation ইত্যাদি।
যেকোনো ফিল্ডের জন্য যদি Required Validation করতে হয়, তাহলে allowBlank: false ব্যবহার করা হয়।
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false // এই ফিল্ডটি খালি রাখা যাবে না
}
ইমেইল ফিল্ডে সঠিক ইমেইল ফরম্যাট চেক করতে vtype ব্যবহার করা হয়।
{
xtype: 'emailfield',
name: 'email',
fieldLabel: 'Email',
vtype: 'email', // ইমেইল ফরম্যাট যাচাই
allowBlank: false
}
Length Validation ব্যবহারকারী ইনপুটের দৈর্ঘ্য নির্ধারণ করতে ব্যবহার করা হয়।
{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
minLength: 6, // ন্যূনতম ৬টি ক্যারেক্টার
maxLength: 20, // সর্বোচ্চ ২০টি ক্যারেক্টার
allowBlank: false
}
একটি ইনপুট ফিল্ডের জন্য একটি নির্দিষ্ট মানের পরিসীমা যাচাই করতে minValue এবং maxValue ব্যবহার করা হয়।
{
xtype: 'numberfield',
name: 'age',
fieldLabel: 'Age',
minValue: 18, // সর্বনিম্ন বয়স ১৮
maxValue: 100, // সর্বোচ্চ বয়স ১০০
allowBlank: false
}
এছাড়াও custom validation ফাংশন ব্যবহার করে নিজস্ব ভ্যালিডেশন লজিক তৈরি করা যেতে পারে।
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false,
validator: function(value) {
return /^[a-zA-Z0-9]+$/.test(value) ? true : 'Username must be alphanumeric.';
}
}
এখানে, validator ফাংশন একটি কাস্টম নিয়ম প্রয়োগ করেছে যা নিশ্চিত করে যে username শুধুমাত্র অক্ষর এবং নম্বর থাকতে পারে।
allowBlank: যদি false সেট করা হয়, তাহলে ফিল্ডটি ফাঁকা থাকতে পারবে না।vtype: নির্দিষ্ট ইনপুট ফিল্ডের জন্য বিল্ট-ইন ভ্যালিডেশন (যেমন ইমেইল, URL)।minLength এবং maxLength: ইনপুটের দৈর্ঘ্য সীমাবদ্ধ করার জন্য।minValue এবং maxValue: ইনপুটের মান সীমাবদ্ধ করার জন্য (যেমন বয়স, মুল্য)।validator: কাস্টম ভ্যালিডেশন ফাংশন তৈরি করতে।ফর্মটি সাবমিট করার আগে, isValid() মেথড ব্যবহার করে ফর্মের ভ্যালিডেশন চেক করা হয়। যদি ফর্মটি ভ্যালিড হয়, তাহলে সাবমিট করা হয়, অন্যথায় ইউজারকে একটি মেসেজ প্রদর্শন করা হয়।
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: 'submitForm.php', // ফর্ম সাবমিট করার URL
success: function(form, action) {
Ext.Msg.alert('Success', 'Form submitted successfully!');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', 'Form submission failed.');
}
});
} else {
Ext.Msg.alert('Invalid', 'Please fix the errors in the form.');
}
ExtJS এর ফর্ম এবং ফর্ম ভ্যালিডেশন ব্যবস্থা ব্যবহার করে আপনি একটি নিরাপদ এবং ব্যবহারকারী বান্ধব অ্যাপ্লিকেশন তৈরি করতে পারবেন।
ExtJS তে Form Panel একটি খুবই গুরুত্বপূর্ণ UI কম্পোনেন্ট, যা ব্যবহারকারীদের ইনপুট নেওয়ার জন্য ব্যবহৃত হয়। এটি বিভিন্ন ধরনের ফর্ম ফিল্ড (যেমন, টেক্সটফিল্ড, রেডিও বাটন, চেকবক্স, ড্রপডাউন ইত্যাদি) ধারণ করে এবং ডেটা সাবমিট করার জন্য ব্যবহৃত হয়। Form Panel সঠিকভাবে কনফিগার করলে ইউজারের ইনপুট প্রক্রিয়া সহজ এবং ইন্টারেক্টিভ হয়।
Form Panel ExtJS এ একটি কনটেইনার প্যানেল, যা ফর্ম ইনপুট ফিল্ড, সাবমিট বাটন, এবং ইনপুট ভ্যালিডেশন কনফিগারেশন ধারণ করে। এটি সাধারণত বিভিন্ন ইনপুট ফিল্ড যেমন টেক্সটফিল্ড, রেডিও বাটন, ড্রপডাউন লিস্ট এবং বাটন ইত্যাদির মাধ্যমে ব্যবহারকারীর ডেটা সংগ্রহ করে।
এখানে Ext.form.Panel কনফিগারেশনের মাধ্যমে একটি বেসিক Form Panel তৈরি করা হবে।
Form Panel তৈরি করার জন্য প্রথমে একটি প্যানেল তৈরি করতে হবে এবং তারপর তার মধ্যে ফর্ম ইনপুট ফিল্ড যুক্ত করতে হবে।
উদাহরণ:
Ext.create('Ext.form.Panel', {
title: 'User Registration Form',
width: 350,
bodyPadding: 10, // ফর্মের চারপাশে প্যাডিং
renderTo: Ext.getBody(), // DOM এ রেন্ডার করা
items: [
{
xtype: 'textfield', // টেক্সটফিল্ড ইনপুট
name: 'username', // ইনপুট ফিল্ডের নাম
fieldLabel: 'Username', // লেবেল
allowBlank: false, // ইনপুট ফিল্ডটি খালি থাকতে পারবে না
labelAlign: 'top' // লেবেল উপরে থাকবে
},
{
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email',
vtype: 'email', // ভ্যালিডেশন: ইমেল ফর্ম্যাট চেক
allowBlank: false,
labelAlign: 'top'
},
{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password', // পাসওয়ার্ড ইনপুট ফিল্ড
allowBlank: false,
labelAlign: 'top'
},
{
xtype: 'checkbox', // চেকবক্স ইনপুট
name: 'agreeTerms',
fieldLabel: 'I agree to the terms and conditions',
inputValue: '1', // চেক করা থাকলে মান হবে 1
uncheckedValue: '0' // চেক না থাকলে মান হবে 0
}
],
buttons: [
{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm(); // ফর্মের ডেটা সংগ্রহ করা
if (form.isValid()) {
console.log(form.getValues()); // ফর্মের মান কনসোল আউটপুটে দেখানো
} else {
Ext.Msg.alert('Invalid', 'Please fill in the required fields!');
}
}
}
]
});
textfield এর মাধ্যমে আমরা ইনপুট ফিল্ড তৈরি করেছি।false দিলে ফিল্ডটি খালি থাকতে পারবে না।password ব্যবহার করা হয়েছে যাতে ইনপুটটি গোপন থাকে।email দিয়ে ইমেল ফিল্ডের জন্য ভ্যালিডেশন দেয়া হয়েছে।ফর্মের ডেটা সঠিকভাবে সাবমিট করার জন্য ফর্মের getForm() মেথড ব্যবহার করা হয়। এটি ফর্মের ডেটা রিট্রিভ করে এবং ডেটা সাবমিট করতে সহায়ক।
উদাহরণ:
handler: function() {
var form = this.up('form').getForm(); // ফর্মের ডেটা সংগ্রহ করা
if (form.isValid()) { // ফর্ম ভ্যালিড হলে
console.log(form.getValues()); // ফর্মের ডেটা কনসোল আউটপুটে দেখানো
} else {
Ext.Msg.alert('Invalid', 'Please fill in the required fields!'); // যদি ফর্ম ইনভ্যালিড হয়
}
}
isValid(): ফর্মের সমস্ত ইনপুট ফিল্ড ভ্যালিডেশন চেক করে, এবং যদি সব ইনপুট ভ্যালিড হয় তবে true রিটার্ন করবে।getValues(): এটি ফর্মের সমস্ত ফিল্ডের মান সংগ্রহ করে এবং একটি অবজেক্ট হিসেবে রিটার্ন করে।ExtJS তে ফর্মের ইনপুট ভ্যালিডেশন সহজে করা যায়। এর জন্য বিভিন্ন প্রপার্টি এবং ভ্যালিডেশন মেথড ব্যবহার করা হয়।
কিছু সাধারণ ভ্যালিডেশন:
allowBlank: এই প্রপার্টি দ্বারা একটি ফিল্ড খালি থাকতে পারবে কি না তা নির্ধারণ করা হয়।vtype: ভ্যালিডেশন টাইপ নির্ধারণ করে (যেমন, email, url, alphanum ইত্যাদি)।minLength এবং maxLength: ইনপুটের দৈর্ঘ্য নির্ধারণ করে।regex: কাস্টম ভ্যালিডেশন রেগুলার এক্সপ্রেশন ব্যবহার করে।উদাহরণ:
{
xtype: 'textfield',
name: 'phone',
fieldLabel: 'Phone Number',
regex: /^[0-9]{10}$/, // ফোন নম্বরের জন্য কাস্টম রেগুলার এক্সপ্রেশন
allowBlank: false
}
ExtJS তে Form Panel তৈরি এবং কনফিগার করা খুবই সহজ এবং শক্তিশালী। এটি বিভিন্ন ফর্ম ইনপুট ফিল্ড এবং সাবমিট বাটন সমন্বিত করে ডেটা সংগ্রহের প্রক্রিয়াকে সহজ করে তোলে। Form Panel এর সাহায্যে আপনি:
ExtJS এর Form Panel কনফিগারেশন এবং বৈশিষ্ট্যগুলি ব্যবহার করে আপনি শক্তিশালী এবং ইন্টারেক্টিভ ফর্ম তৈরি করতে পারবেন যা ব্যবহারকারীর জন্য সহজ ও সুবিধাজনক হবে।
ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা ফর্ম ডিজাইন এবং ফর্মের বিভিন্ন উপাদান (উইজেট) সহজভাবে তৈরি এবং পরিচালনা করতে সহায়তা করে। এক্সটিজেএসে TextField, ComboBox, এবং DateField সহ বিভিন্ন ফর্ম উইজেট ব্যবহৃত হয় যা ইউজার ইন্টারফেসে তথ্য গ্রহণ করতে সাহায্য করে। এই উইজেটগুলো ফর্মের অন্যতম গুরুত্বপূর্ণ অংশ এবং ডেটা সংগ্রহের ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।
TextField এক্সটিজেএস এর সবচেয়ে মৌলিক ইনপুট উইজেট যা ব্যবহারকারীর কাছ থেকে টেক্সট ডেটা গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত ব্যবহারকারীর নাম, ইমেল, অথবা অন্য কোনও স্ট্রিং ইনপুটের জন্য ব্যবহৃত হয়।
Ext.create('Ext.form.Panel', {
title: 'TextField Example',
width: 400,
height: 200,
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false // এটি ইনপুট ফিল্ডের জন্য বাধ্যতামূলক হবে
}],
renderTo: Ext.getBody()
});
'textfield' ইনপুট ফিল্ড তৈরি করে।false থাকে, তবে এটি ইনপুট ফিল্ডের জন্য বাধ্যতামূলক হবে।xtype: 'textfield',
inputType: 'password', // পাসওয়ার্ড ইনপুটের জন্য
regex: /^[a-zA-Z0-9]+$/, // কেবলমাত্র অক্ষর এবং সংখ্যা গ্রহণযোগ্য
ComboBox হল একটি ড্রপডাউন ইনপুট ফিল্ড, যা ব্যবহারকারীকে একটি নির্দিষ্ট তালিকা থেকে একটি মান নির্বাচন করতে দেয়। এটি সাধারণত পছন্দের তালিকা বা দেশ নির্বাচন করার জন্য ব্যবহৃত হয়।
Ext.create('Ext.form.Panel', {
title: 'ComboBox Example',
width: 400,
height: 200,
bodyPadding: 10,
items: [{
xtype: 'combo',
name: 'country',
fieldLabel: 'Select Country',
store: ['USA', 'Canada', 'UK', 'India'], // স্টোরের মাধ্যমে দেশগুলির তালিকা
allowBlank: false, // এটি বাধ্যতামূলক হবে
queryMode: 'local', // ডেটা লোকাল ভাবে লোড করা
displayField: 'name', // প্রদর্শিত ফিল্ড
valueField: 'code' // মানের ফিল্ড
}],
renderTo: Ext.getBody()
});
'combo' ড্রপডাউন নির্বাচন ফিল্ড তৈরি করে।'local' হলে ডেটা ক্লায়েন্ট সাইডে থেকে লোড হবে।true থাকে, তবে ব্যবহারকারী শুধুমাত্র স্টোরের তালিকা থেকে নির্বাচন করতে পারবেন।true থাকে, তবে তালিকায় টাইপ করা মানের সঙ্গে মেলে এমন আইটেমটি স্বয়ংক্রিয়ভাবে নির্বাচন হবে।forceSelection: true,
typeAhead: true
DateField একটি ইনপুট ফিল্ড যা ব্যবহারকারীর কাছ থেকে একটি তারিখ গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত জন্মতারিখ, রেজিস্ট্রেশন তারিখ ইত্যাদির জন্য ব্যবহৃত হয়।
Ext.create('Ext.form.Panel', {
title: 'DateField Example',
width: 400,
height: 200,
bodyPadding: 10,
items: [{
xtype: 'datefield',
name: 'birthdate',
fieldLabel: 'Date of Birth',
allowBlank: false, // বাধ্যতামূলক
format: 'm/d/Y' // তারিখ ফরম্যাট
}],
renderTo: Ext.getBody()
});
'datefield' ব্যবহার করে তারিখ ইনপুট ফিল্ড তৈরি হয়।false থাকে, এটি বাধ্যতামূলক হবে।'m/d/Y' বা 'Y-m-d'।minValue: new Date(2000, 1, 1), // 2000 সালের ১ জানুয়ারি থেকে পরবর্তী তারিখ
maxValue: new Date(2025, 1, 1) // 2025 সালের ১ জানুয়ারির আগে তারিখ নির্বাচনযোগ্য
এই ফর্ম উইজেটগুলো ব্যবহার করে আপনি শক্তিশালী, ব্যবহারকারী-বান্ধব এবং কার্যকরী ফর্ম তৈরি করতে পারবেন যা আপনার অ্যাপ্লিকেশনে তথ্য সংগ্রহ এবং প্রসেসিং সহজ করে তুলবে।
ExtJS তে ফর্ম তৈরি করা এবং সেগুলির মাধ্যমে ডেটা সাবমিট (submit) করা একটি সাধারণ কাজ, যা বিভিন্ন ফর্ম ফিল্ড এবং ভ্যালিডেশন চেক করার মাধ্যমে ব্যবহারকারীর ইনপুট সংগ্রহ করতে সহায়ক। ExtJS এর Ext.form.Panel এবং Ext.form.field কম্পোনেন্ট ব্যবহার করে খুব সহজে ফর্ম তৈরি এবং ডেটা সাবমিট করা যায়। এছাড়াও, ফর্ম ভ্যালিডেশন নিশ্চিত করার জন্য ExtJS শক্তিশালী মেকানিজম প্রদান করে।
প্রথমে, একটি সাধারণ ফর্ম তৈরি করা যাক যেখানে ব্যবহারকারী নাম এবং ইমেইল ইনপুট করবে। ফর্মটি সাবমিট করার সময় আমরা ডেটা সার্ভারে পাঠাবো।
Ext.create('Ext.form.Panel', {
title: 'User Information Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false, // নাম ফিল্ড ফাঁকা রাখা যাবে না
minLength: 3, // কমপক্ষে ৩ অক্ষর
maxLength: 50 // সর্বোচ্চ ৫০ অক্ষর
},
{
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email',
vtype: 'email', // ইমেইল ভ্যালিডেশন
allowBlank: false
}
],
buttons: [
{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/submit', // ফর্মের ডেটা কোথায় পাঠানো হবে
method: 'POST',
success: function(form, action) {
Ext.Msg.alert('Success', 'Form submitted successfully.');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', 'Form submission failed.');
}
});
} else {
Ext.Msg.alert('Invalid', 'Please correct the errors in the form.');
}
}
}
]
});
এখানে:
xtype: 'textfield': এটি একটি টেক্সট ইনপুট ফিল্ড তৈরি করবে।allowBlank: false: এটি নিশ্চিত করবে যে, ইনপুট ফিল্ডটি ফাঁকা থাকা যাবে না।minLength এবং maxLength: ইনপুটের দৈর্ঘ্য সীমাবদ্ধ করতে ব্যবহৃত হয়।vtype: 'email': ইমেইল ফিল্ডের জন্য একটি বিল্ট-ইন ভ্যালিডেশন।form.submit: ফর্মের ডেটা সাবমিট করতে ব্যবহৃত হয়, এখানে একটি POST রিকোয়েস্ট সার্ভারে পাঠানো হবে।ফর্ম ভ্যালিডেশন ব্যবহারকারীর ইনপুট যাচাই করার একটি প্রক্রিয়া। ExtJS তে বিভিন্ন ধরনের বিল্ট-ইন ফর্ম ভ্যালিডেশন রয়েছে যা ফিল্ডের ইনপুট চেক করতে ব্যবহৃত হয়।
Ext.create('Ext.form.Panel', {
title: 'Registration Form',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false, // ইনপুট ফিল্ড ফাঁকা রাখা যাবে না
minLength: 3, // ইনপুটের দৈর্ঘ্য ৩ অক্ষরের কম হতে পারবে না
maxLength: 20, // ইনপুটের দৈর্ঘ্য ২০ অক্ষরের বেশি হতে পারবে না
regex: /^[a-zA-Z0-9]+$/, // কেবল alphanumeric চিহ্ন গ্রহণ করবে
invalidText: 'Username should contain only alphanumeric characters.'
},
{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password', // পাসওয়ার্ড ফিল্ড তৈরি করবে
allowBlank: false,
minLength: 6, // পাসওয়ার্ডের দৈর্ঘ্য কমপক্ষে ৬
vtype: 'alphanum', // পাসওয়ার্ডে অক্ষর এবং সংখ্যা থাকবে
invalidText: 'Password must be at least 6 characters.'
},
{
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email',
vtype: 'email', // ইমেইল ভ্যালিডেশন
allowBlank: false
}
],
buttons: [
{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert('Valid', 'The form is valid. Ready to submit.');
// এখানে ফর্ম ডেটা সাবমিট করা যাবে
} else {
Ext.Msg.alert('Invalid', 'Please fix the errors in the form.');
}
}
}
]
});
এখানে:
allowBlank: false: ফিল্ডের জন্য ভ্যালিডেশন নিশ্চিত করা হচ্ছে যে এটি ফাঁকা থাকলে ফর্ম সাবমিট হবে না।minLength, maxLength: দৈর্ঘ্য সীমাবদ্ধ করতে ব্যবহৃত হয়।regex: ব্যবহারকারী একটি নির্দিষ্ট প্যাটার্ন অনুসরণ করতে বাধ্য হয় (যেমন কেবল অক্ষর এবং সংখ্যা)।vtype: 'email': ইমেইল ভ্যালিডেশন নিশ্চিত করা।যদি আপনি কোনো কাস্টম ভ্যালিডেশন চাইতে পারেন, তবে আপনি কাস্টম ভ্যালিডেশন ফাংশন তৈরি করতে পারবেন।
Ext.create('Ext.form.Panel', {
title: 'Custom Validation Form',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'age',
fieldLabel: 'Age',
allowBlank: false,
validator: function(value) {
if (value < 18) {
return 'Age must be 18 or older';
}
return true; // valid
}
}
],
buttons: [
{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert('Valid', 'Form is valid. Ready to submit.');
// এখানে ফর্ম ডেটা সাবমিট করা যাবে
} else {
Ext.Msg.alert('Invalid', 'Please correct the errors in the form.');
}
}
}
]
});
এখানে, validator ফাংশন ব্যবহার করে একটি কাস্টম ভ্যালিডেশন যুক্ত করা হয়েছে, যা বয়সের ইনপুটের জন্য ১৮ এর কম হলে ত্রুটি বার্তা দেখাবে।
ফর্ম ভ্যালিডেশন সফল হলে আপনি ফর্মের ডেটা AJAX অথবা সার্ভারের মাধ্যমে সাবমিট করতে পারেন। ExtJS এর form.submit() মেথড এটি সম্পন্ন করতে ব্যবহৃত হয়।
form.submit({
url: '/submit',
method: 'POST',
success: function(form, action) {
Ext.Msg.alert('Success', 'Form submitted successfully');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', 'Form submission failed');
}
});
এখানে:
url: ফর্মের ডেটা কোথায় পাঠানো হবে।method: HTTP মেথড (POST, GET ইত্যাদি) ব্যবহার করা হবে।success এবং failure: ফর্ম সাবমিট সফল হলে অথবা ব্যর্থ হলে কলব্যাক ফাংশন।Ext.form.Panel ব্যবহার করা হয়, যেখানে বিভিন্ন ফর্ম ফিল্ড যেমন textfield, datefield, checkbox ইত্যাদি থাকে।allowBlank, minLength, regex, vtype, এবং কাস্টম ভ্যালিডেশন ফাংশন ব্যবহার করা যায়।form.submit() মেথড ব্যবহার করা হয়, যা AJAX বা HTTP মেথডের মাধ্যমে ডেটা সার্ভারে পাঠায়।এই বৈশিষ্ট্যগুলোর মাধ্যমে আপনি একটি পূর্ণাঙ্গ এবং ব্যবহারকারী-বান্ধব ফর্ম তৈরি করতে পারবেন।
Validation হল ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের একটি গুরুত্বপূর্ণ অংশ, যা নিশ্চিত করে যে ব্যবহারকারী শুধুমাত্র সঠিক তথ্য প্রদান করছে। ExtJS তে client-side validation এবং server-side validation দুটি ব্যবহৃত হয়, যেখানে client-side validation ব্যবহারকারীর ইনপুট ফর্মের আগে চেক করা হয় এবং server-side validation সার্ভার সাইডে ইনপুট যাচাই করা হয়। দুটোই নিরাপত্তা এবং ডেটার স্বচ্ছতা বজায় রাখার জন্য অপরিহার্য।
Client-side validation হল ফর্মের ইনপুট ডেটা যাচাই করার একটি প্রক্রিয়া যা ক্লায়েন্ট (ব্যবহারকারী) এর সিস্টেমে রান করে, সার্ভারের আগে। এটি সাধারণত দ্রুত ইনপুট যাচাই করার জন্য ব্যবহৃত হয় এবং ব্যবহারকারীদের দ্রুত প্রতিক্রিয়া প্রদান করে। ExtJS ফ্রেমওয়ার্কে Ext.form.field (যেমন Ext.form.field.Text, Ext.form.field.Number, ইত্যাদি) এর মাধ্যমে ফিল্ড ভ্যালিডেশন করা হয়।
Ext.create('Ext.form.Panel', {
title: 'Login Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false, // ফিল্ডটি খালি না রাখার জন্য
minLength: 3, // মিনি দৈর্ঘ্য ৩
maxLength: 20, // ম্যাক্স দৈর্ঘ্য ২০
vtype: 'email' // ইমেইল ভ্যালিডেশন
},
{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false, // ফিল্ডটি খালি না রাখার জন্য
minLength: 6 // পাসওয়ার্ডের মিনি দৈর্ঘ্য ৬
}
],
buttons: [{
text: 'Login',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) { // ফর্ম ভ্যালিডেশন চেক
Ext.Msg.alert('Success', 'Form is valid');
} else {
Ext.Msg.alert('Error', 'Please fill all the required fields');
}
}
}]
});
এখানে:
allowBlank: false: ব্যবহারকারী অবশ্যই একটি মান ইনপুট করতে হবে।minLength এবং maxLength: ইনপুটের দৈর্ঘ্য নির্ধারণ করা।vtype: 'email': ইমেইল ইনপুটের জন্য একটি বিল্ট-ইন ভ্যালিডেশন।isValid(): ফর্মের সব ফিল্ড ভ্যালিড কিনা তা চেক করে।আপনি যদি একটি কাস্টম ভ্যালিডেশন যুক্ত করতে চান, তাহলে validator প্রপার্টি ব্যবহার করতে পারেন।
{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age',
validator: function(value) {
if (value < 18) {
return 'You must be at least 18 years old';
}
return true;
}
}
Server-side validation হল ইনপুট যাচাই করার প্রক্রিয়া যা সার্ভারে চলে, যেখানে ব্যবহারকারীর ইনপুট সার্ভারে পাঠানো হয় এবং সেখানে যাচাই করা হয়। এটি নিরাপত্তার জন্য গুরুত্বপূর্ণ, কারণ ক্লায়েন্ট সাইড ভ্যালিডেশন সহজে বাইপাস করা যায় এবং এটি ডেটার ইন্টিগ্রিটি রক্ষা করে।
Ext.create('Ext.form.Panel', {
title: 'Login Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
},
{
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password',
allowBlank: false
}
],
buttons: [{
text: 'Login',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
// Ajax রিকোয়েস্ট সার্ভারে পাঠানো
Ext.Ajax.request({
url: 'validateLogin.php', // সার্ভার সাইড স্ক্রিপ্ট
method: 'POST',
params: form.getValues(),
success: function(response) {
var result = Ext.decode(response.responseText);
if (result.success) {
Ext.Msg.alert('Success', 'Login successful');
} else {
Ext.Msg.alert('Failure', 'Invalid username or password');
}
},
failure: function() {
Ext.Msg.alert('Error', 'Server error');
}
});
}
}
}]
});
এখানে:
Ext.Ajax.request ব্যবহার করা হয়েছে সার্ভারের সাথে যোগাযোগ করার জন্য।validateLogin.php ফাইলকে POST রিকোয়েস্ট পাঠানো হচ্ছে।<?php
// validateLogin.php
$username = $_POST['username'];
$password = $_POST['password'];
// ডাটাবেস চেক বা অন্যান্য সার্ভার সাইড ভ্যালিডেশন
if ($username == 'admin' && $password == 'password') {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
?>
এখানে:
$_POST দিয়ে ইনপুট ডেটা গ্রহন করা হচ্ছে এবং যাচাই করা হচ্ছে।Client-side validation দ্রুত ইউজার ইন্টারঅ্যাকশন এবং ব্যাচালর চেকিং এর জন্য ব্যবহৃত হয়, এবং Server-side validation ডেটার নিরাপত্তা এবং ইনটিগ্রিটি নিশ্চিত করে।
ExtJS তে Custom Form Validation Rules তৈরি করা একটি সাধারণ প্রক্রিয়া, যা আপনাকে আপনার ফর্ম ফিল্ডের জন্য নির্দিষ্ট শর্ত তৈরি করতে সাহায্য করে। এই কাস্টম ভ্যালিডেশনগুলি ফর্ম ডেটা যাচাই করার সময় ব্যবহার করা হয় এবং এটি সাধারণত validator ফাংশন বা asyncValidator ফাংশন ব্যবহার করে সম্পন্ন করা হয়।
validator: সিঙ্ক্রোনাস (synchronous) ভ্যালিডেশন এর জন্য ব্যবহার করা হয়। এটি একটি ফাংশন যা ডেটার ভিত্তিতে ফিল্ডটি বৈধ কিনা চেক করে।asyncValidator: অ্যাসিঙ্ক্রোনাস (asynchronous) ভ্যালিডেশন, যা কলব্যাক ফাংশন ব্যবহার করে কাজ করে এবং প্রায়ই সার্ভার সাইড যাচাইয়ের জন্য ব্যবহার করা হয়।সিঙ্ক্রোনাস ভ্যালিডেশন ফাংশন সাধারণত validator প্রপার্টির মধ্যে লেখা হয় এবং এটি ফিল্ডের ইনপুট ডেটা যাচাই করে। যদি ইনপুটটি বৈধ না হয়, এটি একটি ত্রুটি বার্তা ফিরিয়ে দেয়।
ধরা যাক, আমরা একটি ফিল্ড তৈরি করতে চাই যেখানে ব্যবহারকারীর নাম কমপক্ষে ৫ অক্ষরের হতে হবে।
Ext.create('Ext.form.Panel', {
title: 'User Form',
width: 300,
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false, // এই ফিল্ডটি খালি রাখা যাবে না
validator: function(value) {
if (value.length < 5) {
return 'Username must be at least 5 characters long';
}
return true; // এটি বৈধ হলে 'true' ফেরত দেয়
}
}, {
xtype: 'button',
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert('Success', 'Form is valid');
} else {
Ext.Msg.alert('Failure', 'Form is invalid');
}
}
}],
renderTo: Ext.getBody()
});
এখানে:
validator ফাংশনটি ব্যবহার করা হয়েছে যাতে ফিল্ডের ইনপুট যাচাই করা যায়। যদি নামের দৈর্ঘ্য ৫ অক্ষরের কম হয়, তবে একটি ত্রুটি বার্তা প্রদর্শিত হবে।অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন সাধারণত সার্ভার সাইড যাচাই করার জন্য ব্যবহৃত হয়, যেখানে একটি ফাংশন ব্যবহারকারীকে একটি সার্ভারে পাঠাতে এবং তার ফলাফল ফেরত পেতে পারে।
ধরা যাক, আমাদের একটি ইউজারনেম ফিল্ড রয়েছে, যেখানে আমাদের সার্ভার চেক করতে হবে যে এটি আগে নিবন্ধিত হয়েছে কিনা।
Ext.create('Ext.form.Panel', {
title: 'User Form',
width: 300,
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false,
validator: function(value) {
// এটি অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন, কলব্যাক ফাংশন ব্যবহার করে
var result = false;
Ext.Ajax.request({
url: '/check-username', // সার্ভার API
params: { username: value },
async: false,
success: function(response) {
var data = Ext.decode(response.responseText);
if (data.exists) {
result = 'Username already exists';
} else {
result = true;
}
},
failure: function() {
result = 'Server error';
}
});
return result;
}
}, {
xtype: 'button',
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert('Success', 'Form is valid');
} else {
Ext.Msg.alert('Failure', 'Form is invalid');
}
}
}],
renderTo: Ext.getBody()
});
এখানে:
async: false সেট করা হয়েছে যাতে Ext.Ajax.request সার্ভারের সঙ্গে যোগাযোগ করার পর সিঙ্ক্রোনাস ভ্যালিডেশন শেষে তার ফলাফল ফেরত দেয়।validator: function(value) {
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailRegex.test(value)) {
return 'Please enter a valid email address';
}
return true;
}
validator: function(value) {
var phoneRegex = /^[0-9]{10}$/;
if (!phoneRegex.test(value)) {
return 'Phone number must be 10 digits';
}
return true;
}
ফর্মের পুরো ভ্যালিডেশন চালাতে, আপনি form.isValid() ব্যবহার করতে পারেন যা সমস্ত ফিল্ডের জন্য কাস্টম ভ্যালিডেশন চেক করবে।
var form = this.up('form').getForm();
if (form.isValid()) {
// ফর্ম সঠিক হলে, সার্ভারে পাঠান বা প্রয়োজনীয় কার্যকলাপ করুন
console.log('Form is valid!');
} else {
console.log('Form is invalid!');
}
validator: সিঙ্ক্রোনাস ভ্যালিডেশন জন্য ব্যবহৃত হয়, যেখানে ডেটা ফিল্ডের ইনপুট যাচাই করা হয়।asyncValidator: অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন যা সার্ভার সাইড যাচাইয়ের জন্য ব্যবহৃত হয়।form.isValid(): পুরো ফর্মের ভ্যালিডেশন চেক করার জন্য ব্যবহৃত হয়।এটি আপনার ফর্মের ডেটা যাচাই এবং ব্যবহারকারীদের জন্য সঠিক ইনপুট নিশ্চিত করতে সহায়ক।
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
