জাভাস্ক্রিপ্ট ভ্যালিডেশন এপিআই(API)
ডোম মেথড
| প্রোপার্টি | বর্ননা | checkValidity() | ইনপুট এলিমেন্টে ভ্যালিড ডাটা থাকলে true রিটার্ন করে। |
|---|---|---|---|
| setCustomValidity() | ইনপুট এলিমেন্টের validationMessage প্রোপার্টি সেট করে। |
ইনপুট এলিমেন্টে সঠিক তথ্য না থাকলে একটি ম্যাসেজ প্রদর্শন করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>একটি নাম্বার দিন এবং ক্লিক করুন:</p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "Input OK";
}
}
</script>
</body>
</html>
ফলাফল
ডোম প্রোপার্টি
| প্রোপার্টি | বর্ননা |
|---|---|
| validity | ইনপুট এলিমেন্টের ভ্যালিডিটি সম্পর্কিত বুলিয়ান প্রোপার্টি ধারণ করে। |
| validationMessage | ব্রাউজারে প্রদর্শনের জন্য একটি ভ্যালিডেশন ম্যাসেজ ধারণ করে। |
| willValidate | ইনপুট এলিমেন্ট ভ্যালিডেট হবে কিনা নির্দেশ করে। |
ভেলিডিটি প্রোপার্টি
| প্রোপার্টির নাম | বর্ননা | |
|---|---|---|
| customError | যদি একটি কাস্টম ভ্যালিডিটি মেসেজ সেট করা হয়,তাহলে ইহা true সেট হয়। | |
| patternMismatch | যদি একটি এলিমেন্টের ভ্যালু তার pattern এট্রিবিউটের সাথে না মিলে তাহলে ইহা true সেট হয়। | |
| rangeOverflow | যদি একটি এলিমেন্টের ভ্যালু তার max এট্রিবিউট থেকে বড় হয় তাহলে true সেট হয়। | |
| rangeUnderflow | যদি একটি এলিমেন্টের ভ্যালু তার min এট্রিবিউট থেকে ছোট হয় তাহলে true সেট হয়। | |
| stepMismatch | যদি একটি এলিমেন্টের ভ্যালু তার step এট্রিবিউট অনুযায়ী ভ্যালিড না হয় তাহলে true সেট হয়। | |
| tooLong | যদি একটি এলিমেন্টের ভ্যালু তার maxLength এট্রিবিউটের ভ্যালু থেকে বেশি হয় তাহলে ইহা true সেট হয়। | |
| typeMismatch | যদি একটি এলিমেন্টের ভ্যালু তার type এট্রিবিউট অনুযায়ী ভ্যালিড না হয় তাহলে ইহা true সেট হয়। | |
| valueMissing | যদি "required" এট্রিবিউটযুক্ত একটি এলিমেন্টের কোন ভ্যালু না থাকে তাহলে ইহা true সেট হয়। | |
| valid | যদি একটি এলিমেন্টের ভ্যালু ভ্যালিড হয় তাহলে ইহা true সেট হয়। |
উদাহরণ
যদি ইনপুট ফিল্ডের নম্বরটি ১০০ থেকে বড় হয় তাহলে একটি ম্যাসেজ প্রদর্শন করবেঃ
rangeOverflow প্রোপার্টি
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>একটা সংখ্যা দিন এবং ok ক্লিক করুন :</p>
<input id="id1" type="number" max="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeOverflow) {
txt = "Value too large";
} else {
txt = "Input OK";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
ফলাফল
যদি ইনপুট ফিল্ডের নম্বরটি ১০০ থেকে ছোট হয় তাহলে একটি ম্যাসেজ প্রদর্শন করবেঃ
rangeUnderflow প্রোপার্টি
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p>একটা সংখ্যা দিন এবং ok ক্লিক করুন:</p>
<input id="id1" type="number" min="100">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var txt = "";
if (document.getElementById("id1").validity.rangeUnderflow) {
txt = "Value too small";
} else {
txt = "Input OK";
}
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
ফলাফল