Monday, February 15, 2010

form validation problem

<html>
<head>
<title>HOTEL RESERVATION SYSTEM</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<link type="text/css" href="../../../public/css/ui.all.css"rel="stylesheet" />
<script type="text/javascript" src="../../../public/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../../public/js/ui.core.js"></script>
<script type="text/javascript" src="../../../public/js/ui.datepicker.js"></script>

<script src="../../../public/js/validate.js" type="text/javascript"></script>
<script type="text/javascript" src="../../../public/js/jquery.delegate.js"></script>

<script type="text/javascript">
$(function() {
$('#check_in_date').datepicker({dateFormat: 'MM d, yy'});
$('#check_out_date').datepicker({dateFormat: 'MM d, yy'});

});
</script>




<script type="text/javascript">

var validtion = function(){
$("#myform").validate(
{
rules: {
EEmail: {
required: true,
email: true
},
email_again: {
required: true,
email: true,
equalTo: "#EEmail"
},
fname: "required",
lname: "required",

telno: {
required: true,
number: true
},
rooms: {
required: true,
number: true,
}
},
messages: {
fname: "First Name required",
lname: "Last Name required",

telno: {
required: "Telephone No. is required",
},
rooms: {
required: "No. of rooms is required",
},
EEmail: {
required: "Email Address is required",
},
email_again: {
required: "Email Address is required",
}
}
});
}

$(document).ready(function() {
validtion();
});

</script>



<style type="text/css">
body
{
background-color:#c4eaff;
}
#wrapper
{
width:950px;
height:750px;
margin:0 auto;
}
#content
{
position:absolute;
left: 521px;
top: 108px;
width:auto;
height: 29px;
}
#indent
{
padding-bottom:5px;
}


#select{
width:11em;
margin-bottom:5px;
}

#field, label { float: left; font-family:"Courier New", Courier, monospace; font-size: small; }
label { width: 10em; }
br { clear: both; }
input { margin-left: .5em; float: left; border: 1px solid black; margin-bottom: .5em; }
input.submit { float: none; }
input.error { border: 1px solid red; width: auto; }
label.error {
background: url('../../../public/images/unchecked.gif') no-repeat;
padding-left: 16px;
margin-left: .3em;
width:240px;
}
label.valid {
background: url('../../../public/images/checked.gif') no-repeat;
display: block;
width: 16px;
height: 16px;
}
</style>


</head>


<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (myHotelTheme.psd) -->

<div id="wrapper">

<table id="Table_01" width="950" height="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="../../../public/images/images/reserve_01.jpg" width="950" height="382" alt=""></td>
</tr>
<tr>
<td>
<img src="../../../public/images/images/reserve_02.jpg" width="950" height="368" alt=""></td>
</tr>
</table>

</div>

<div id="content">
<div>
<form id="myform" method="post" action="<?= site_url('Register/get'); ?>">

<label for="fname">First Name</label>
<input type="text" id="fname" name="fname" style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace"/>
<br>

<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname" style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace"/>
<br>

<label for="country">Country</label>
&nbsp;
<select name="country" id="select">
<option style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace">PHILIPPINES</option>
<option style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace">UNITED STATES</option>

</select> <br>


<label for="EEmail">E-Mail</label>
<input type="text" id="EEmail" name="EEmail" style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace" />
<br/>

<label for="email_again">Verify E-Mail</label>
<input type="text" id="email_again" name="email_again" style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace" />
<br/>

<label for="fname">Location</label>
<input type="text" id="fname" name="fname" style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace" />
<br/>

<label for="lname">Hotel</label>
<input type="text" id="lname" name="lname" style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace" />
<br/>


<p> ROOM PREFERENCES</p>

<label>No. of Adults*</label>
<input style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace" name="adultNo" type="text" size="3" value=""/>
<br>

<label>No. of Children
12 below</label>
<input style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace" name="childNo" type="text" size="3"/>
<br>



<label>Check-in Date*</label>
<input style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace" type="text" id="check_in_date" name="check_in_date">
<br>

<label>Check-out Date*</label>
<input style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace" type="text" id="check_out_date" name="check_out_date">
<br>

<label for="rooms">Rooms</label>
<input type="text" id="rooms" name="rooms" style="background-color:#0ca6c8; font-family:'Courier New', Courier, monospace"/>
<br/>

<input class="submit" type="submit" value="Validate!" />
</form>


</div>
</div>



<!-- End ImageReady Slices -->
</body>
</html>



now it doesn't work on FF...it does not validate