Javascript এর মাধ্যমে HTML Form Validation করুন

কেমন আছেন সবাই , আশা করি সবাই ভাল আছেন ,আজ আমি আপনাদের সাথে  Javascript এর মাধ্যমে HTML Form Validation শেয়ার করব।

 

নিচের কোডটি index.html নামে সেভ করেন

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="script.js" type="text/javascript"></script>
</head>

<body>
<form action="abc.html" name="formReg" onsubmit="return Validation();">
<table width="400" border="1">
  <tr>
    <td>Full Name:</td>
    <td><input type="text" name="fn" id="fn" />
    	<b id="name">&nbsp;</b>
    </td>
  </tr>
  <tr>
    <td>Password:</td>
    <td><input type="password" name="pass1" id="pass1" />
    	<b id="pas1">&nbsp;</b>
    </td>
  </tr>
  <tr>
    <td>Retype Password:</td>
    <td><input type="password" name="pass2" id="pass2" />
    	<b id="pas2">&nbsp;</b>
    </td>
  </tr>
  <tr>
  	<td>Country:</td>
    <td>
    	<select id="cnt" name="cnt">
        	<option value="0">Select any Country....</option>
            <option value="1">Bangladesh</option>
            <option value="2">India</option>
            <option value="3">Pakistan</option>
        </select>
        <b id="coww">&nbsp;</b>
    </td>
  </tr>
  <tr>
  	<td>Gender:</td>
    <td>
    	<input type="radio" name="gen" id="gen" value="M" />Male
        <input type="radio" name="gen" id="gen2" value="F" />Female
        <b id="gn">&nbsp;</b>
    </td>
  </tr>
  <tr>
  	<td></td>
    <td>
    	<input type="checkbox" name="ag" id="ag" />I Agree this agriment
        <b id="agr">&nbsp;</b>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="Save" /></td>
  </tr>
</table>
</form>
</body>
</html>

নিচের কোডটি script.js নামে সেভ করেন

<pre>
	function Validation(){
		var c = 0;
		var msg = "";
		var name = document.forms["formReg"]["fn"].value;
		var p1 = document.forms["formReg"]["pass1"].value;
		var p2 = document.forms["formReg"]["pass2"].value;
		var cow = document.forms["formReg"]["cnt"].value;
		var gnd = document.getElementById("gen").checked;
		var gnd2 = document.getElementById("gen2").checked;
		var agree = document.getElementById("ag").checked;
		

		
		
		
		document.getElementById("name").innerHTML = "";
		document.getElementById("pas1").innerHTML = "";
		document.getElementById("pas2").innerHTML = "";
		document.getElementById("coww").innerHTML = "";
		document.getElementById("gn").innerHTML = "";
		document.getElementById("agr").innerHTML = "";
		
		if(name == null || name == "") {
			c++;
			msg = msg + "Full Name Required" + "\n";	
			document.getElementById("name").innerHTML = "Required";
		}
		if(p1 == null || p1 == "") {
			c++;
			msg = msg + c + ". Password Required" + "\n";	
			document.getElementById("pas1").innerHTML = "Required";
		}
		else{
			if(p1.length < 5) {
				c++;
			msg = msg + c + ". Password too small" + "\n";	
			document.getElementById("pas1").innerHTML = "Password too small";
			}
		}
		
		if(p2 == null || p2 == "") {
			c++;
			msg = msg + c + ". Retype Password Required" + "\n";	
			document.getElementById("pas2").innerHTML = "Required";			
		}
		
		if(p1 != "" && p2 != "" && p1 != p2) {
			c++;
			msg = msg + c + ". Password mele nai"  + "\n";			
			document.getElementById("pas1").innerHTML = "Password Not Match";		
		}
		
		if(cow == 0) {
			c++;
			msg = msg + c + ". Choose any country" + "\n";
			document.getElementById("coww").innerHTML = "Choose One";
		}
		
		if(gnd == false && gnd2 == false) {
			c++;
			msg = msg + c + ". Select Gender" + "\n";
			document.getElementById("gn").innerHTML = "Choose One";
		}
		
		if(agree == false) {
			c++;
			msg = msg + c + ". Jani na" + "\n";
			document.getElementById("agr").innerHTML = "Tik marte hobe";
		}
		
		
		if(c == 0) {			
			return true;
		}else{
			alert("Total Error: " + c + "\n" + msg);
			return false;
		}
		
	}</pre>

টিউনস ভালো লাগলে আমার ব্লগ  থেকে ঘুরে আসুন।

Level 0

আমি tanvir007123। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 1 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 13 টি টিউন ও 3 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

porer ta kiser?

Level 0

HTML Form Validation ;What is that? Pls let me understood broadly.Thanks .

    @zahid20: সবার জন্য সবকিছু না। আর যদি বিস্তারিত জানতে চান, তবে নেট এ সার্চ দিন।