আসুন একটি উদাহরণ দেখি যেখানে onsubmit-এ ইনপুট টেক্সট ভ্যালিডেট করা হচ্ছে:
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form onsubmit="return validateTheForm()" method="GET" action="https://mail.google.com/mail/">
<br/>
<input type="text" id="txtInput" value=""/>
<input type="submit" value="search"/>
</form>
<script>
function validateTheForm(){
var validation = (document.getElementById('txtInput').value == 'gmail');
if(!validation){
alert('Something went wrong...Plese write gmail intext box and click');
return false;
}
return true;
}
</script>
</body>
</html>
উপরোক্ত প্রোগ্রাম চালানোর জন্য, ফাইলের নাম "anyName.html(index.html)" হিসেবে সেভ করুন এবং ফাইলের ওপর ডান ক্লিক করুন। VS Code এডিটরে "Open with Live Server" অপশনটি নির্বাচন করুন।
আউটপুট
এটি নিচের আউটপুটটি তৈরি করবে:

Step 1
টেক্সট বক্সে GMAIL টাইপ করুন:

সার্চ বাটনে ক্লিক করার পর আউটপুট নিচের মতো:

Step 2
GMAIL ছাড়া অন্য মান টাইপ করলে আপনি একটি অ্যালার্ট মেসেজ পাবেন।
আসুন প্রথমে মান টাইপ করি এবং এন্টার চাপি:

সার্চ বাটনে ক্লিক করার পর আপনি নিচের আউটপুট মতো একটি অ্যালার্ট মেসেজ পাবেন:
