কম্পিউটার টিউটোরিয়াল

জাভাস্ক্রিপ্টে HTML ফর্ম action এবং onsubmit ভ্যালিডেশন

আসুন একটি উদাহরণ দেখি যেখানে 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" অপশনটি নির্বাচন করুন।

আউটপুট

এটি নিচের আউটপুটটি তৈরি করবে:

জাভাস্ক্রিপ্টে HTML ফর্ম action এবং onsubmit ভ্যালিডেশন

Step 1

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

জাভাস্ক্রিপ্টে HTML ফর্ম action এবং onsubmit ভ্যালিডেশন

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

জাভাস্ক্রিপ্টে HTML ফর্ম action এবং onsubmit ভ্যালিডেশন

Step 2

GMAIL ছাড়া অন্য মান টাইপ করলে আপনি একটি অ্যালার্ট মেসেজ পাবেন।

আসুন প্রথমে মান টাইপ করি এবং এন্টার চাপি:

জাভাস্ক্রিপ্টে HTML ফর্ম action এবং onsubmit ভ্যালিডেশন

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

জাভাস্ক্রিপ্টে HTML ফর্ম action এবং onsubmit ভ্যালিডেশন

  1. জাভাস্ক্রিপ্টে HTML ফর্মের মান কনসোলে দেখানো

  2. জাভাস্ক্রিপ্টে innerHTML সেট করুন

  3. HTML এবং CSS দিয়ে সাইন আপ ফর্ম তৈরি করার পদ্ধতি

  4. HTML Form action অ্যাট্রিবিউট