All types of form validation



<form name="f1" onsubmit="return vali()">
  name
  <input type="text" name="fname" id="fname">
  <br>
  Email
  <input type="text" name="email" id="email">
  <br>
  Number
  <input type="text" name="number" id="number">
  <br>
  Strong pass
  <input type="text" name="strongpass" id="strongpass">
  <br>
  password
  <input type="text" name="pass" id="pass">
  <br>
  conform pass
  <input type="text" name="cpass" id="cpass">
  <br>
  city
  <select name="city" id="city">
    <option></option>
    <option value="junagadh">junagaadh</option>
  </select>
  <br>
  Gender
  <input type="radio" name="gender" id="gender" />
  Male
  <input type="radio" name="gender" id="gender" />
  Female<br>
  Post
  <input type="checkbox" name="developer" id="developer" />
  Developer
  <input type="checkbox" name="designer" id="designer" />
  Designer<br>
  <input type="submit" name="submit">
  <script language="javascript">
	
	function vali()
	{
		var x = document.forms["f1"]["fname"].value;
		if(x == null || x == "")
		{
			alert("name");
			fname.focus();
			return false;
		}
		
		var x = document.forms["f1"]["email"].value;
		if(!x.match(/^[a-zA-Z0-9._]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/))
		{
			alert("email");
			email.focus();
			return false;
		}
		var x = document.forms["f1"]["number"].value;
		if(!x.match(/^[0-9]{10}$/))
		{
			alert("number");
			number.focus();
			return false;
		}
		var x = document.forms["f1"]["strongpass"].value;
		if(!x.match(/^[0-9A-Za-z._-]{6,10}$/))
		{
			alert("pass musst be 10 digit");
			strongpass.focus();
			return false;
		}
		var x = document.forms["f1"]["pass"].value;
		if(x == null || x == "")
		{
			alert("password");
			pass.focus();
			return false;
		}
		var x = document.forms["f1"]["pass"].value;
		var y = document.forms["f1"]["cpass"].value;
		if(x != y) // (!(x==y)) also use this
		{
			alert("pass not match");
			cpass.focus();
			return false;
		}
		var x = document.forms["f1"]["city"].value;
		if(x == null || x == "")
		{
			alert("city");
			city.focus();
			return false;
		}
		if(document.f1.gender[0].checked == false && gender[1].checked == false)
		{
			alert("gensder");
			gender[0].focus();
			return false
		}
		if(document.f1.developer.checked == false && designer.checked == false)
		{
			alert("job");
			developer.focus();
			return false;
		}
		
		alert("Thank you for submitting data");
		window.location.href="validation.php";
		
		return true;
	}
	
</script>
</form>



Advertisements

Tagged: ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: