Untitled

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body{
	font-family:Tahoma;
	font-size:14px;
	color:#3D3D3D;
}
.inputText{
	width:300px;
}
#signupForm label.error {
	width: auto;
	color:#FF0004;
	font-size:90px;
}
</style>
</head>

<script src="jquery/jquery-1.12.0.min.js"></script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.4/jquery-ui.min.css">
<script src="jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<script>
	$(function() {
		$( "#birthdate" ).datepicker( {
			changeMonth: true,
			changeYear: true,
			numberOfMonths: 2,
			dateFormat: "yy-mm-dd",
			showAnim: "fadeIn"
		} ); // #birthdate

		$("#signupForm").validate({
			rules: {
				username: {
					required: true,
					minlength: 5
				}, // username
				password: {
					required: true,
					minlength: 8
				}, // password
				confirm_password: {
					required: true,
					equalTo: "#password"
				}, // confirm_password
				fullname: "required",
				address: "required",
				zipcode: {
					required: true,
					minlength: 5,
					maxlength: 5,
					number: true
				}, // zipcode
				email: {
					required: true,
					email: true
				}, // email
				birthdate: "required",
				gender: "required"

			}, // rules


			messages: {
				username: {
					required: "Please enter a username",
					minlength: "Your username must consist of at least 5 characters"
				}, // username
				password: {
					required: "Please provide a password",
					minlength: "Your password must consist of at least 8 characters long"
				}, // password
				confirm_password: {
					required: "Please provide a confirm password",
					equalTo: "Please enter the same password as above"
				}, // confirm_password
				fullname: "Please enter your fullname",
				address: "Please enter your address",
				zipcode: "Please enter your zipcode",
				email: "Please enter a valid email address",
				birthdate: "Please select a birthdate",
				gender: "<< Please select a gender"

			} // messages

		}); // #signupForm

		$("#username").keypress(function(event)){
			if ((event.charCode >= 48 && event.charCode <= 57) || // 0-9
				(event.charCode >= 65 && event.charCode <= 90) || // A-Z
				(event.charCode >= 97 && event.charCode <= 122) || // a-z
				 event.charCode <= 46 ) {
					return true;
			} else {
				return false;
			} // if event
		}); // #username

	}); // function
</script>

<body>

<form method="post" action="" id="signupForm">
<table cellpadding="6" cellspacing="1" align="center">
	<tr>
    	<td valign="top">username</td>
        <td><input class="inputText" type="text" name="username" id="username">
        <div><label for="username" class="error"></label></div>
      </td>
    </tr>

    <tr>
    	<td valign="top">password</td>
        <td><input class="inputText" type="text" name="password">
        <div><label for="password" class="error"></label></div>
        </td>
    </tr>

	<tr>
    	<td valign="top">confirm password</td>
      <td><input class="inputText" type="text" name="confirm_password">
      <div><label for="confirm_password" class="error"></label></div>
      </td>
    </tr>

	<tr>
    	<td valign="top">ชื่อ นามสกุล</td>
      <td><input class="inputText" type="text" name="fullname">
      <div><label for="fullname" class="error"></label></div>
      </td>
    </tr>

    <tr>
    	<td valign="top">ที่อยู่</td>
      <td><textarea class="inputText" rows="3" name="address"></textarea>
      <div><label for="address" class="error"></label></div>
      </td>
    </tr>

    <tr>
    	<td valign="top">รหัสไปรษณีย์</td>
      <td><input class="inputText" type="text" name="zipcode">
      <div><label for="zipcode" class="error"></label></div>
      </td>
    </tr>

    <tr>
    	<td valign="top">Email</td>
      <td><input class="inputText" type="text" name="email">
      <div><label for="email" class="error"></label></div>
      </td>
    </tr>

    <tr>
    	<td valign="top">เพศ</td>
      <td><input type="radio" name="gender" value="male">ชาย
        <input type="radio" name="gender" value="female">หญิง
      <label for="gender" class="error"></label>
      </td>
    </tr>

    <tr>
    	<td valign="top">วันเกิด</td>
      <td><input class="inputText" type="text" name="birthdate" id="birthdate">
      <div><label for="birthdate" class="error"></label></div>
      </td>
    </tr>

    <tr>
    	<th colspan="2"><input type="reset" value="ล้างข้อมูล">  <input type="submit" value="ส่งข้อมูล"></th>
    </tr>
</table>
</form>

</body>
</html>