Monday, 25 May 2015

validation jq and js 

<?php$con=mysqli_connect('localhost','root','','bijal');if(@mysqli_connect_errno()){echo mysqli_connect_error();die;}?>
<html>
<head>
<script src='view/jq1.js'>
</script>
</head>
<body>
<table>
<form method='post' action='index.php?op=insert' id='sub' enctype="multipart/form-data">
<tr>
<td>First name</td>
<td><input type='text' name='fname' id='fn'></td>
<td><span style='display:none;color:red' id='sp1' >enter first name</span></td>
</tr>
<tr>
<td>Last name</td>
<td><input type='text' name='lname' id='ln'></td>
<td><span style='display:none;color:red' id='sp2'>enter last name</span></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type='email' name='eid' id='eid'></td>
<td><span style='display:none;color:red' id='sp3'>enter email id</span></td>
<td><span style='display:none;color:red' id='old'>email already used</span></td>
<td><input type='hidden' name='go' id='go'></td>
</tr>
<tr>
<td>Password</td>
<td><input type='password' name='pass1' id='pass'></td>
<td><span style='display:none;color:red' id='sp4'>enter password</span></td>
</tr>
<tr>
<td>Re-enter Password</td>
<td><input type='password' name='pass2' id='pass2'></td>
<td><input type='hidden' name='checkpass' id='checkpass'></td>
<td><span style='display:none;color:red' id='sp5'>password not match</span></td>
</tr>
<tr>
<td>Birth Date</td>
<td><input type='date' name='date' id='d' max=<?php echo date("Y-m-d") ?>></td>
<td><span style='display:none;color:red' id='sp6'>date not selected</span></td>
</tr>
<tr>
<td>Gender</td>
<td>male<input type='radio' name='gen' value='male' > female<input type='radio' name='gen' value='female' ></td>
<td><span style='display:none;color:red' id='sp10'>gender not selected</span></td>
<p></p>
</tr>
<tr>
<td>hobbies</td>
<td>reading<input type='checkbox' name='h1' id='h1' class='chkbox' > learning<input type='checkbox' name='h2' id='h2' class='chkbox'> cricket<input type='checkbox' name='h3' id='h3' class='chkbox'></td>
<td><span style='display:none;color:red' id='sp12'>please select one hobby</span></td>
</tr>
<tr>
<td>coutry</td>
<td>
<select name='country' id='country'>
<option value='0'>select one</option>

<?php   
   $sql="select * from con";   $x=mysqli_query($con,$sql);   while($row=mysqli_fetch_array($x))   {   echo "<option value=".$row['cid'].">".$row['cname']."</option>";   }?>
<!--<option value='1'>India</option><option value='2'>USA</option><option value='3'>England</option>--></select>
</td>
<td><span style='display:none;color:red' id='spcon'>select one country</span></td>
</tr>
<tr>
<td>state</td>
<td>
<select name='state' id='state' >
<option value='0'>select one</option>
</select>
</td>
<td><span style='display:none;color:red' id='spstate'>select one state</span></td>
</tr>
<tr>
<td>city</td>
<td>
<select name='city' id='ct'>
<option value='0'>select one</option>
</select>
</td>
<td><span style='display:none;color:red' id='sp7'>select one city</span></td>
</tr>
<tr>
<td>Profile pic:</td>
<td><input type="file" name="fupload" id="file" /></td>
<td><span style='display:none;color:red' id='spfi'>select img</span></td>
<td colspan="2">
 <fieldset>
  <legend>Profile Pic comditions:</legend>
  Type should be jpg, jpeg, or png<br>
  size should be less then 1mb<br>  
 </fieldset>
</td>
</tr>
<tr>
<td>
<input type='submit' value='add'>
</td>
<td>already member<a href="index.php?op=login"><b>Login here</b></a></td>
<td><div id='watch'></div></td>
</tr>
</form>
</table>
<div id='res'></div>
<script>
$("#state").hide();
$("#ct").hide();
$("#country").change(function()
{
   $("#state").show();
var coun=$("#country").val();
var req={};
req['country']=coun;
$.ajax({
  url: 'view/select.php/state',
  data:req,
  type:'POST',
  datatype:'html',
  success:function(str)
  {
   // alert(str);   $('#state').empty();
   $('#ct').empty();
    $('#ct').append('<option value=0>select one</option>');
   $('#state').append('<option value=0>select one</option>');
    $("#state").append(str);
  }
});    
});

$("#state").change(function()
{
   $("#ct").show();
var state=$("#state").val();
var req={};
req['state']=state;
$.ajax({
  url: 'view/selectct.php/city',
  data:req,
  type:'POST',
  datatype:'html',
  success:function(str)
  {
     
    $('#ct').empty();
    $('#ct').append('<option value=0>select one</option>');
    $("#ct").append(str);
  }
});    
});

$("#eid").change(function()
{
var x=$("#eid").val();
var array={};
array['name']=x;
$.ajax({
  url: 'view/test.php/test',
  data:array,
  type:'POST',
  datatype:'html',
  success:function(result)
  {
    if(result=='0')
    {
      $("#old").fadeIn();    
      $("#go").val('0'); 
    }
    else    {
       $("#old").fadeOut();
       $("#go").val('1');    
    }
  }
});
});

$("#sub").submit(function(event)
{
var n = $( "input[type=checkbox]:checked" ).length;
var g=$("input:radio[name=gen]:checked").val();
var f=$("#fn").val();
var l=$("#ln").val();
var e=$("#eid").val();
var p=$("#pass").val();
var p2=$("#pass2").val();
var d=$("#d").val();
var c=$("#ct").val();
var st=$("#state").val();
var coun=$("#country").val();
var fi=$("#file").val();
var ch=$("#go").val();
var chkpass=$("#checkpass").val();
if(f=='')
{
$("#sp1").fadeIn();
$("#fn").css("border","1px solid red");
}
if(l=='')
{
$("#sp2").fadeIn();
$("#ln").css("border","1px solid red");
}
if(e=='')
{
$("#sp3").fadeIn();
$("#eid").css("border","1px solid red");
}
if(p=='')
{
$("#sp4").fadeIn();
$("#pass").css("border","1px solid red");
}
if(d=='')
{
$("#sp6").fadeIn();
$("#d").css("border","1px solid red");
}
if(c=='0')
{
$("#sp7").fadeIn();
$("#ct").css("border","1px solid red");
}
if(st=='0')
{
$("#spstate").fadeIn();
$("#state").css("border","1px solid red");
}
if(coun=='0')
{
$("#spcon").fadeIn();
$("#country").css("border","1px solid red");
}
if(fi=='')
{
$("#spfi").fadeIn();
$("#file").css("border","1px solid red");
}
if(g==undefined)
{
$("#sp10").fadeIn();
}
if(n=='0')
{
$("#sp12").fadeIn();
}
if(chkpass=='1')
{
   $("#sp5").fadeIn();
}
if(f=='' || l=='' || e=='' || p=='' || d=='' || c=='0' || ch=='0' || g==undefined || n=='0' || st=='0' || coun=='0' || chkpass=='1'||fi=='')
{
event.preventDefault();
}
});

$("#pass2").keyup(function()
{
var p=$("#pass").val();
var p2=$("#pass2").val();
if(p!=p2)
{
$("#sp5").fadeIn();
$("#pass").css("border","1px solid red");
$("#pass2").css("border","1px solid red");
$("#checkpass").val('1');
}
else{
$("#sp5").fadeOut();
$("#pass").css("border","1px solid black");
$("#pass2").css("border","1px solid black");
$("#checkpass").val('0');
}
});

$("#fn").keyup(function()
{
var f=$("#fn").val();
if(f=='')
{
$("#sp1").fadeIn();
$("#fn").css("border","1px solid red");
return false;
}
else{
$("#sp1").fadeOut();
$("#fn").css("border","1px solid black");
}
});

$("#ln").keyup(function()
{
var l=$("#ln").val();
if(l=='')
{
$("#sp2").fadeIn();
$("#ln").css("border","1px solid red");
return false;
}
else{
$("#sp2").fadeOut();
$("#ln").css("border","1px solid black");
}
});

$("#eid").keyup(function()
{
var e=$("#eid").val();
if(e=='')
{
$("#sp3").fadeIn();
$("#eid").css("border","1px solid red");
return false;
}
else{
$("#sp3").fadeOut();
$("#eid").css("border","1px solid black");
}
});

$("#pass").keyup(function()
{
var p=$("#pass").val();
if(p=='')
{
$("#sp4").fadeIn();
$("#pass").css("border","1px solid red");
return false;
}
else{
$("#sp4").fadeOut();
$("#pass").css("border","1px solid black");
}
});

$("#ct").change(function()
{
var c=$("#ct").val();
if(c=='0')
{
$("#sp7").fadeIn();
$("#ct").css("border","1px solid red");
return false;
}
else{
$("#sp7").fadeOut();
$("#ct").css("border","1px solid black");
}
});

$("#country").change(function()
{
var c=$("#country").val();
if(c=='0')
{
$("#spcon").fadeIn();
$("#country").css("border","1px solid red");
return false;
}
else{
$("#spcon").fadeOut();
$("#country").css("border","1px solid black");
}
});

$("#state").change(function()
{
var c=$("#state").val();
if(c=='0')
{
$("#spstate").fadeIn();
$("#state").css("border","1px solid red");
return false;
}
else{
$("#spstate").fadeOut();
$("#state").css("border","1px solid black");
}
});

$("#d").change(function()
{
var d=$("#d").val();
if(d=='')
{
$("#sp6").fadeIn();
$("#d").css("border","1px solid red");
return false;
}
else{
$("#sp6").fadeOut();
$("#d").css("border","1px solid black");
}
});

$("input:radio[name=gen]").change(function()
{
var g=$("input:radio[name=gen]:checked").val();
if(g==='undefined')
{
$("#sp10").fadeIn();
}
else{
$("#sp10").fadeOut();
}
});

$("input[type=checkbox]").change(function()
{
var n=$( "input[type=checkbox]:checked" ).length;
if(n=='0')
{
$("#sp12").fadeIn();
}
else{
$("#sp12").fadeOut();
}
});

</script>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)