Form Validation

<!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>Msc I.T F11 A32</title>
<style type="text/css">
.font{
    font-size:20px;
    font-family:"comic sans ms";

}
.check{
    font-size:16px;
    font-weight:bold;
    }
    .error{
        #FFF;
        font-size:18px;
        font-weight:bold;
        display:none;
    }
</style>
<script type="text/javascript">

function clear_text( val){

    document.getElementById(val).style.display = 'none';
}


function validate(){

 var fname = document.getElementById("first").value;
 var lname = document.getElementById("last").value;
 var dob = document.getElementById("dob").value;
 var address = document.getElementById("address").value;
 var country = document.getElementById("country").value;
 var city = document.getElementById("city").value;
 var email = document.getElementById("email").value;
 var password = document.getElementById("password").value;
 var password2 = document.getElementById("password2").value;
 var fatherna = document.getElementById("fname").value;

 var name_err = document.getElementById("name_err");
 var fname_err = document.getElementById("fname_err");
 var dob_err = document.getElementById("dob_err");
 var gender_err = document.getElementById("gender_err");
 var address_err = document.getElementById("address_err");
 var language_err = document.getElementById("language_err");
 var country_err = document.getElementById("country_err");
 var city_err = document.getElementById("city_err");
 var email_err = document.getElementById("email_err");
 var password_err = document.getElementById("password_err");
 var password2_err = document.getElementById("password2_err");
 var hobbies_err = document.getElementById("hobbies_err");



 if(fname != ""){
         var reg = /^([a-z ]{3,25})$/i;
        if(!(reg.test(fname))){
        name_err.innerHTML = "First Name is not Valid";
        name_err.style.display="inline";
        document.getElementById("first").focus();
        return false;

        }
   
   if(lname != ""){
           var reg = /^([a-z ]{3,25})$/i;
               if(!(reg.test(lname))){
        name_err.innerHTML = "Last Name is not Valid";
        name_err.style.display="inline";
        document.getElementById("last").focus();
        return false;
        }
   
            if(fatherna != ""){
                 var reg = /^([a-z ]{3,25})$/i;
                 if(!(reg.test(fatherna))){
                    fname_err.innerHTML = "Father Name is not Valid";
                    fname_err.style.display="inline";
                    document.getElementById("fname").focus();
                    return false;
        }
   
         if(dob != ""){
// ^ indicates the beginning of the string. Using a ^ metacharacter requires that the match start at the beginning.
// $ indicates the end of the string. Using a $ metacharacter requires that the match end at the end of the string.
                     var reg = /^([0-9]{1,2})+\-([0-9]{1,2})+\-([0-9]{4})$/;
                    if(!(reg.test(dob))){

                        dob_err.innerHTML = "Use (00-00-0000) pattern for date";
                        dob_err.style.display="inline";
                        document.getElementById("dob").focus();
                        return false;
        }

            //now checking Option Button Selection
                var gender = document.forms['form1']['gender'];
                var i =0;

                if((gender[0].checked == true)||(gender[1].checked == true)){
                    i=22;
                    }
                    if(i==0){
                        gender_err.innerHTML = "Please Select Your Gender";
                        gender_err.style.display="inline";
                        document.getElementById("male").focus();
                        return false;
                    }
                if(address != ""){
                            var reg = /^([a-z0-9/./, ]{8,50})$/i;
                            if(!(reg.test(address))){

                                address_err.innerHTML = "Address is not Valid";
                                address_err.style.display="inline";
                                document.getElementById("address").focus();
                                return false;
        }
                        var language = document.forms['form1']['language'].options;
                        if(language[0].selected){

                                language_err.innerHTML = "Plz Select Your Language";
                                language_err.style.display="inline";
                                document.getElementById("language").focus();
                                return false;
                        }

                    if(country != ""){
                                var reg = /^([a-z ]{4,30})$/i;
                                if(!(reg.test(country))){

                                country_err.innerHTML = "Country Name is Not Valid !";
                                country_err.style.display="inline";
                                document.getElementById("country").focus();
                                return false;
        }

                        if(city != ""){
                                    var reg = /^([a-z ]{5,15})$/i;
                                    if(!(reg.test(city))){

                                city_err.innerHTML = "City Name is Not Valid !";
                                city_err.style.display="inline";
                                document.getElementById("city").focus();
                                return false;
        }

                            if(email != ""){
                                        var reg = /^([a-z0-9\.\_\-]{4,32})+\@([a-z0-9\.\_\-]{4,32})+\.([a-z]{2,10})$/i;
                                        if(!(reg.test(email))){

                                email_err.innerHTML = "Email Address is Not Valid !";
                                email_err.style.display="inline";
                                document.getElementById("email").focus();
                                return false;
        }


                                 if(password != ""){
                                        if(isNaN(password) == false){

                                password_err.innerHTML = "Password Must Contain some Alphabets";
                                password_err.style.display="inline";
                                document.getElementById("password").focus();
                                return false;
                                                }
                                    if(password.length < 6){
                                                password_err.innerHTML = "Password length must be 6 Charaters";
                                                password_err.style.display="inline";
                                                document.getElementById("password").focus();
                                                return false;
                                    }
                                    if(password2 != ""){


                                             if(password != password2){

                                password2_err.innerHTML = "Your Password's does not match ";
                                password2_err.style.display="inline";
                                document.getElementById("password2").focus();
                                return false;
                                                }

                                                var hobbies = document.forms['form1']['hobbies'];
                                                var h = 0;
                                                var i=0;
                                                for(i=0;i<hobbies.length;i++){
                                                    if(hobbies[i].checked){
                                                        h=22;
                                                    }
                                                }
                                                if(h==0){
                                            hobbies_err.innerHTML = "Select Your Hobbies ...";
                                            hobbies_err.style.display="inline";
                                            document.getElementById("cricket").focus();
                                            return false;
                                                }
                                            // finally return true
                                            return true;

                                            }else{

                                password2_err.innerHTML = "Please Re-Type Your Password :(";
                                password2_err.style.display="inline";
                                document.getElementById("password2").focus();
                                return false;
                                                }


                                        }else{

                                password_err.innerHTML = "Please Enter Your Password";
                                password_err.style.display="inline";
                                document.getElementById("password").focus();
                                return false;
                                            }

                                    }else{

                                email_err.innerHTML = "Please Enter Your Email Address";
                                email_err.style.display="inline";
                                document.getElementById("email").focus();
                                return false;
                                        }


                                }else{

                                city_err.innerHTML = "Please Enter Your City Name";
                                city_err.style.display="inline";
                                document.getElementById("city").focus();
                                return false;
                                    }


                            }else{

                                country_err.innerHTML = "Please Enter Your Country Name";
                                country_err.style.display="inline";
                                document.getElementById("country").focus();
                                return false;
                                }


                        }else{

                            address_err.innerHTML = "Please Enter Your Address";
                            address_err.style.display="inline";
                            document.getElementById("address").focus();
                            return false;
                            }

            }else{

                dob_err.innerHTML = "Please Enter Your Date of Birth";
                dob_err.style.display="inline";
                document.getElementById("dob").focus();
                return false;
        }

    }else{

                fname_err.innerHTML = "Please Enter Your Father Name";
                fname_err.style.display="inline";
                document.getElementById("fname").focus();
                return false;
    }

 }else{

                name_err.innerHTML = "Please Enter Your Last Name";
                name_err.style.display="inline";
                document.getElementById("last").focus();
                return false;
    }
     }else{

                name_err.innerHTML = "Please Enter Your First Name";
                name_err.style.display="inline";
                document.getElementById("first").focus();
                return false;

    }
}

</script>
</head>

<body bgcolor="#FFFFFF>
<form name="form1" action="Show Loging.html" method="get">
<table style="margin-left:300px;">
  <tbody><tr>
<td colspan="3">
<label style="    font-family:'comic sans ms'; font-size:46px; color:#33F; font-weight:bolder;  margin-left:120px;">
Registration Form
</label>
<hr size="3">
</td>
</tr>
<tr><td><br></td></tr>
<tr>
<td>
<label class="font">Name </label>
</td><td>
<input size="20" class="font" id="first" onkeypress="clear_text('name_err');" type="text"></td><td>
<input size="23" id="last" class="font" onkeypress="clear_text('name_err');" type="text">
</td><td><label style="display: none;" class="error" id="name_err">Please Enter First Name</label></td>
</tr>
<tr>
<td><label class="font">Father Name</label>
</td>
<td colspan="2">
<input class="font" size="50" id="fname" onkeypress="clear_text('fname_err');" type="text"></td>
<td><label class="error" id="fname_err">Plz Enter Father First Name</label></td>
</tr>
<tr><td>
<label class="font">Date of Birth</label></td>
<td colspan="2"><input class="font" size="50" id="dob" onkeypress="clear_text('dob_err');" type="text"></td>
<td><label class="error" id="dob_err">Plz Enter Your Date of Birth</label></td>
</tr>
<tr>
<td><label class="font">Gender </label></td>
<td>
<input name="gender" style="margin-left:90px;" onchange="clear_text('gender_err');" class="font" id="male" value="male" type="radio">
<label class="font">Male</label></td>
<td>
<input name="gender" onchange="clear_text('gender_err');" class="font" id="female" value="female" type="radio">
<label class="font">Female</label>
</td>
<td><label class="error" id="gender_err">Plz Select Your Gender</label></td>
</tr>
<tr>
<td>
<label class="font">Address </label>
</td><td colspan="2"><input class="font" size="50" onkeypress="clear_text('address_err');" id="address" type="text" width="450px"></td>
<td><label class="error" id="address_err">Plz Enter Your Address</label></td>
</tr>
<tr>
<td>
<label class="font">Language</label>
</td><td colspan="2"><select name="language" onchange="clear_text('language_err');" class="font" id="language" style="width: 525px;">
  <option selected="selected">----- Select Your Language -----</option>
  <option value="Arabic">Arabic</option>
  <option value="English">English</option>
  <option value="Urdu">Urdu</option>
  <option value="French">French</option>
  <option value="Spanish">Spanish</option>
</select></td>
<td><label id="language_err" class="error">Plz Select Your Language</label></td>
</tr>
<tr><td>
<label class="font">Country</label>
</td><td colspan="2"><input size="50" onkeypress="clear_text('country_err');" class="font" id="country" type="text"></td>
<td><label id="country_err" class="error">Plz Enter Your Country Name</label></td>
</tr>
<tr><td>
<label class="font">City</label>
</td><td colspan="2">
<input size="50" class="font" id="city" onkeypress="clear_text('city_err');" type="text"></td>
<td><label id="city_err" class="error">Plz Enter Your City Name</label></td>
</tr>

<tr><td>
<label class="font">Email Address</label>
</td><td colspan="2">
<input size="50" class="font" id="email" onkeypress="clear_text('email_err');" type="email"></td>
<td><label id="email_err" class="error">Plz Enter Your Email Address</label></td>
</tr>


<tr><td>
<label class="font">Password</label>
</td><td colspan="2">
<input size="50" class="font" id="password" onkeypress="clear_text('password_err');" type="password"></td>
<td><label id="password_err" class="error">Plz Enter Your Password</label></td>
</tr>
<tr><td>
<label class="font"> Confirm Password</label>
</td><td colspan="2">
<input onkeypress="clear_text('password2_err');" size="50" class="font" id="password2" type="password"></td>
<td><label class="error" id="password2_err">Please Enter Password </label></td>
</tr>

<tr><td><label class="font">Hobbies</label></td>
<td colspan="2"><input id="cricket" name="hobbies" value="cricket" onchange="clear_text('hobbies_err');" type="checkbox">
<label class="check">Cricket</label>

<input id="Badminton" value="Badminton" name="hobbies" onchange="clear_text('hobbies_err');" type="checkbox">
<label class="check">Badminton</label>

<input id="Hockey" value="Hokey" name="hobbies" onchange="clear_text('hobbies_err');" type="checkbox">
<label class="check">Hokey</label>


<input id="Drawing" value="Drawing" name="hobbies" onchange="clear_text('hobbies_err');" type="checkbox">
<label class="check">Drawing</label>

<input id="Programming" value="Programming" name="hobbies" onchange="clear_text('hobbies_err');" type="checkbox">
<label class="check">Programming</label>

</td>
<td><label id="hobbies_err" class="error">Please Select Hobby</label></td>
</tr>
<tr><td><br></td></tr>
<tr><td></td><td colspan="2">
<input style="margin-left:130px; font-size:18px;" value="Submit " onclick="return validate();" type="submit">
</td></tr>
</tbody></table>
</form>



</body></html>

Comments

Post a Comment

Popular posts from this blog

Code for Database Connection confirmation PHP+HTML

<html> <head> <title> web page 2</title> </head> <body> <?php error_reporting(0); $con=mysql_connect("localhost","root",""); if($con){     mysql_select_db('one',$con); echo "connection successfully"; } else{     echo "connection fail"; } $id=$_REQUEST['id']; $name=$_REQUEST['name']; $email=$_REQUEST['email']; $password=$_REQUEST['password']; $query="INSERT INTO `db1`.`one` (`id`, `name`, `email`, `password`) VALUES (NULL, '$name', '$email', '$password'); "; $r = mysql_query($query); if($r) {echo "inserted";} else {echo "error";} ?> </body> </html>
Read more

Database connect with php

<?php error_reporting(0); include("db.php"); if($_REQUEST['id'] != ""){ $id = $_REQUEST['id'] ; $del = "delete  from one where id = $id"; $dd = mysql_query($del);     } $q = "select * from one;"; $res = mysql_query($q); ?> <html> <head> <title>3rd page</title> </head> <body> <table border="2" cellpadding="2" cellspacing="2"> <tr> <td>ID</td> <td>Name</td> <td>Email</td> <td>Password</td> <td>Delete</td> <td>Edit</td> </tr> <?php while($row = mysql_fetch_array($res)){ ?> <tr> <td><?php echo $row['id']; ?></td> <td><?php echo $row['name']; ?></td> <td><?php echo $row['email']; ?></td> <td><?php echo $row['password']; ?></td> <td><button onClick=...
Read more

New Slides

Notes of Network Security                             Data Encryption Standard   Click here for for further detail on DES   Assignment of Re search method........ Performance of Windows XP, Windows Vista and Apple's Leopard Computers under a Denial of Service Attack  IT PM slides ...... 6) 4- M ar _ Estimate Cost determine Budget 7) 25-mar-2013 _ Quality management 8) 9-Aprl-2013_Procurement Management     The assignments from lecture slides are following 1) Requirement traceability matrix. 2) WBS 3) WBS Dictionary 4)   Gantt Chart 5) Network Diagram 6) Milestone Chart 7) RACI CHART 8) Organizational Break Down structure   9) Issue Log   Click h ere for Rest of the templates  Please discuss in case of any ambiguity.  
Read more