অ্যাঙুলারজেএস ফর্ম ভ্যালিডেশন - AngularJS Form Validation

AngularJS ইনপুট ডাটাকে যাচাই করতে পারে।

অ্যাঙুলারজেএস ফর্ম ভ্যালিডেশন

AngularJS ক্লাইন্ট-সাইড ফর্ম ভ্যালিডেশন অফার করে।

AngularJ ফর্ম এবং ইনপুট ফিল্ডের (input, textarea, select) অবস্থা পর্যালোচনা করে এবং ব্যবহারকারীকে এর বর্তমান অবস্থা জানায়।

এমনকি তাদের টাচ বা মোডিফাই করা হয়েছে কিনা, সেই তথ্য AngularJS সংরক্ষন করে।

আপনি ইনপুটকে যাচাই করার জন্য স্ট্যান্ডার্ড এইচটিএমএল(৫) এট্রিবিউট ব্যবহার বা নিজস্ব ভ্যালিডেশন ফাংশন তৈরি করে নিতে পারেন।

শুধুমাত্র ক্লাইন্ট-সাইড ভ্যালিডেশন সিকিউর নয়। সিকিউরের জন্য সার্ভার-সাইড ভ্যালিডেশন প্রয়োজন।

`Required`

ইনপুট ফিল্ড পূরন করতেই হবে তা নির্ধারণ করা জন্য এইচটিএমএল(৫) required এট্রিবিউট ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="">

<p>ইনপুট ফিল্ডে লিখার চেষ্টা করুনঃ</p>

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>ইনপুটের অবস্থা হলোঃ</p>
<h3>{{myForm.myInput.$valid}}</h3> 

</body> 
</html>

ফলাফল

`ই-মেইল`

শুধুমাত্র ই-মেইলের জন্য এইচটিএমএল(৫) email টাইপ ব্যবহার করন।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="">

<p>ইনপুট ফিল্ডে একটি ই-মেইল লিখার চেষ্টা করুনঃ</p>

<form name="myForm">
<input type="email" name="myInput" ng-model="myInput">
</form>

<p>ইনপুটের অবস্থা হলোঃ</p>
<h3>{{myForm.myInput.$valid}}</h3>

</body> 
</html>

ফলাফল

ফর্ম এবং ইনপুটের অবস্থা

AngularJS স্বয়ংক্রিয়ভাবে ফর্ম ও ইনপুট ফিল্ডের অবস্থা আপডেট করে।

ইনপুট ফিল্ডের নিম্নোক্ত অবস্থা রয়েছেঃ

$untouched ফিল্ডটি এখনো টাচ করা হয়নি।
$touched ফিল্ডটি টাচ করা হয়েছে।
$pristine ফিল্ডটি এখনো মোডিফাই করা হয়নি।
$dirty ফিল্ডটি মোডিফাই করা হয়েছে।
$invalid ফিল্ডের কন্টেন্ট সঠিক নয়।
$valid ফিল্ডের কন্টেন্ট সঠিক।

এগুলো ইনপুট ফিল্ডের প্রোপার্টি।

ফর্ম ফিল্ডের নিম্নোক্ত অবস্থা রয়েছেঃ

$pristine এখনো কোনো ফিল্ড মোডিফাই করা হয়নি।
$dirty এক বা একাধিক ফিল্ড মোডিফাই করা হয়েছে।
$invalid ফর্মের কন্টেন্ট সঠিক নয়।
$valid ফর্মের কন্টেন্ট সঠিক।
$submitted ফর্ম সাবমিট করা হয়েছে।

এগুলো ফর্মের প্রোপার্টি।

আপনি এই স্ট্যাটগুলো দ্বারা ব্যবহারকারীকে অর্থপূর্ন মেসেজ দেখাতে পারেন। যেমন- একটি required ফিল্ড যদি ব্যবহারকারী খালি রেখে যায়, সেজন্য আপনি ব্যবহারকারীকে একটি সতর্কতামূলক মেসেজ দিতে পারেন।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="">

<p>প্রথম ইনপুট ফিল্ডকে খালি রাখার চেষ্টা করুনঃ</p>

<form name="myForm">
<p>নামঃ
<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
</p>

<p>ঠিকানাঃ
<input name="myAddress" ng-model="myAddress" required>
</p>

</form> 

</body> 
</html>

ফলাফল

সিএসএস ক্লাস

AngularJS ফর্ম ও ইনপুট ফিল্ডের অবস্থা অনুসারে এগুলোতে সিএসএস ক্লাস যুক্ত করে।

ইনপুট ফিল্ড থেকে নিম্নের ক্লাসগুলো রিমুভ বা যুক্ত করা হয়ঃ

ng-untouched ফিল্ডটি এখনো টাচ করা হয়নি।
ng-touched ফিল্ডটি টাচ করা হয়েছে।
ng-pristine ফিল্ডটি এখনো মোডিফাই করা হয়নি।
ng-dirty ফিল্ডটি মোডিফাই করা হয়েছে।
ng-valid ফিল্ডের কন্টেন্ট সঠিক।
ng-invalid ফিল্ডের কন্টেন্ট সঠিক নয়।
ng-valid-key প্রত্যেক ভ্যালিডেশনের জন্য একটি key যেমনঃ যখন একাধিক কিছু ভ্যালিডেশন করতে হয় তখন ng-valid-required খুব উপকারী।
ng-invalid-key যেমনঃ ng-invalid-required

ফর্ম থেকে নিম্নের ক্লাসগুলো রিমুভ বা যুক্ত করা হয়ঃ

ng-pristine এখনো কোনো ফিল্ড মোডিফাই করা হয়নি।
ng-dirty এক বা একাধিক ফিল্ড মোডিফাই করা হয়েছে।
ng-valid ফর্মের কন্টেন্ট সঠিক।
ng-invalid ফর্মের কন্টেন্ট সঠিক নয়।
ng-valid-key প্রত্যেক ভ্যালিডেশনের জন্য একটি key যেমনঃ যখন একাধিক কিছু ভ্যালিডেশন করতে হয় তখন ng-valid-required খুব উপকারী।
ng-invalid-key যেমনঃ ng-invalid-required

ক্লাসের ভ্যালু false হলে তা রিমুভ হয়।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
<style>
input.ng-invalid {
    background-color:green;
}
input.ng-valid {
    background-color:pink;
}
</style> 
</head>
<body ng-app="">

<p>ইনপুট ফিল্ডে লিখার চেষ্টা করুনঃ</p>

<form name="myForm">
<input name="myName" ng-model="myName" required>
</form>

</body> 
</html>

ফলাফল

ফর্মের অন্য স্টাইলঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
<style>
form.ng-pristine {
    background-color:lightblue;
}
form.ng-dirty {
    background-color:pink;
}
</style> 
</head>
<body ng-app="">

<form name="myForm">
<p>ইনপুট ফিল্ডে লিখার চেষ্টা করুনঃ</p>

<input name="myName" ng-model="myName" required>
</form>

</body> 
</html>

ফলাফল

কাস্টম ভ্যালিডেশন

নিজস্ব ভ্যালিডেশন ফাংশন তৈরি করতে আপনার এপ্লিকেশনে একটি নতুন ডিরেক্টিভ সংযুক্ত করতে হবে এবং ভ্যালিডেশনের জন্য নির্দিষ্ট আর্গুমেন্ট ব্যবহার করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body ng-app="myApp">

<p>ইনপুট ফিল্ডে লিখার চেষ্টা করুনঃ</p>

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<p>ইনপুটের অবস্থা হলোঃ</p>
<h3>{{myForm.myInput.$valid}}</h3>

<script>
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attr, mCtrl) {
            function myValidation(value) {
                if (value.indexOf("e") > -1) {
                    mCtrl.$setValidity('charE', true);
                } else {
                    mCtrl.$setValidity('charE', false);
                }
                return value;
            }
            mCtrl.$parsers.push(myValidation);
        }
    };
});
</script> 

</body> 
</html>

ফলাফল

উদাহরণের ব্যাখ্যাঃ

এইচটিএমএলে, নতুন ডিরেক্টিভকে my-directive এট্রিবিউট ব্যবহার করে রেফার করা হবে।

জাভাস্ক্রিপ্টে, নতুন myDirective নামে ডিরেক্টিভ যুক্ত করে শুরু করছি।

মনে রাখবেন, ডিরেক্টিভের নাম দেওয়ার সময় অবশ্যই কেমেল-কেস myDirective ব্যবহার করতে হবে, কিন্তু কল করার সময় আলাদা নামmy-directive ব্যবহার করতে হবে।

তারপর যেখানে ngModel প্রয়োজন, সেখানে একটি অবজেক্ট রিটার্ন করুন। যেটা হলো ngModelController

একটি লিংকিং(linking) ফাংশন তৈরি করুন যা কিছু আর্গুমেন্ট নিবে। যেখানে ৪র্থ আর্গুমেন্টmCtrl হলো ngModelController

এরপর একটি ফাংশন নির্ধারণ করুন। এর নাম দিন myValidation, যেটা একটি আর্গুমেন্ট নিবে। এই আর্গুমেন্টটি হলো ইনপুট এলিমেন্টের ভ্যালু।

ভ্যালুতে অক্ষর "e" আছে কিনা তা যাচাই করুন এবং মডেল কন্ট্রোলারের ভ্যালিডিটি true বা false সেট করুন।

সর্বশেষে, mCtrl.$parsers.push(myValidation); অন্য ফাংশনের অ্যারেতে myValidation ফাংশন সংযুক্ত হবে, যা ইনপুট ভ্যালু পরিবর্তনের প্রত্যেকবার এক্সিকিউট হবে।

ভ্যালিডেশন উদাহরণ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js">
    </script>
    <title>AngularJS উদাহরণ</title> 
</head>
<body> 

<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>

<p>ইউজার নামঃ<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>ই-মেইলঃ<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'Tamim Iqbal';
    $scope.email = 'tamimiqbal@gmail.com';
});
</script>

</body> 
</html>

ফলাফল

এইচটিএমএল novalidate এট্রিবিউট ডিফল্ট ব্রাউজার ভ্যালিডেশন অসক্রিয় করতে ব্যবহার করা হয়।

উদাহরণের ব্যাখ্যাঃ

AngularJS ng-model ডিরেক্টিভ ইনপুট এলিমেন্টকে মডেলের সাথে সংযুক্ত করে।

মডেল অবজেক্টের দুটি প্রোপার্টি রয়েছেঃ user ও email

ng-show এর কারনে, color:red সহ spans এলিমেন্ট শুধুমাত্র প্রদর্শিত হয় যখন user বা email $dirty এবং $invalid হয়।

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

AngularJs টিউটোরিয়াল

অ্যাঙুলারজেএস ফর্ম ভ্যালিডেশন - AngularJS Form Validation