init project

2f5862af · Thi Thanh Yen Hoang · 2f5862af · 2f5862af · 2f5862af
Commit 2f5862af authored Jun 23, 2016 by Thi Thanh Yen Hoang
Show whitespace changes
Inline Side-by-side

Showing with 116 additions and 0 deletions

bt.html
+29 -0

javascript.js
+42 -0

stylesheet.css
+45 -0

No files found.
--- a/bt.html
+++ b/bt.html
+<!DOCTYPE html>
+<html>
+	<head>
+		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
+		<title>Result</title>
+	</head>
+	<body>
+
+
+<form>
+    <div><p> Register Form </p></div>
+    <ul>
+	<li><div id="message"> </div></li>
+        <li><div class=label>First Name</div> <input type="text" id="fname" placeholder="First Name" value="" size=100% /></li>
+        <li><div class=label>Last Name </div><input type="text" placeholder="Last Name" id="lname" value="" size=100% /></li>
+        <li><div class=label>Email</div> <input type="text" placeholder="Email" id="email" value="" size=100% /></li>
+        <li><div class=label>Email Confirmation</div> <input type="text" placeholder="Email Confirmation" id="cemail" value="" size=100% /></li>
+        <li><div class=label> Birthday </div> <input type="text" placeholder="Birthday" id="bday" value="" size=100% /></li>
+       
+    </ul> 
+    <button onclick="return validate();">Register</button>
+</form>
+
+ <script src="javascript.js">
+          
+        </script>
+	
+	</body>
+</html>
--- a/javascript.js
+++ b/javascript.js
+function validate()
+          {
+            //input
+             var firstname = document.getElementById("fname").value;
+             var lastname = document.getElementById("lname").value;
+             var email = document.getElementById("email").value;
+             var cemail = document.getElementById("cemail").value;
+             var bday = document.getElementById("bday").value;
+	     
+	     var alphabeta = /[a-zA-Z]+$/;
+	     var date = /^((((0[13578])|(1[02]))[\/]?(([0-2][0-9])|(3[01])))|(((0[469])|(11))[\/]?(([0-2][0-9])|(30)))|(02[\/]?[0-2][0-9]))[\/]?\d{4}$/;
+             var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+	     
+            //message
+             var message = document.getElementById("message");
+            
+            // Validate
+             if (firstname == ""||lastname == ""||email==""||cemail==""|bday==""){
+            	message.innerHTML = "Input Error";
+              	message.style.color = "red";
+		return false;
+            }
+            
+             else{
+		if(filter.test(email) == filter.test(cemail)) {
+			if (alphabeta.test(firstname) == true && alphabeta.test(lastname) == true && date.test(bday) == true) {
+            			alert("Thank for your registering");
+				return true;
+			}
+	        	else {
+                     		message.innerHTML = "Input Error";
+              	     		message.style.color = "red";
+		     		return false;
+			}
+                }
+		else {
+			message.innerHTML = "Input Error";
+	              	message.style.color = "red";
+			return false;
+        	}    
+            }
+}
--- a/stylesheet.css
+++ b/stylesheet.css
+form {
+   margin: auto;
+   width: 70%;
+   height: 40%;
+   border: 1px ridge gray;
+   
+}
+input {
+    float: right;
+    margin-top: 5px;
+	margin-right:10px;
+	margin-bottom:5px;
+	position: relative;
+}
+button {
+    margin-top: 5px;
+	margin-right:10px;
+	margin-bottom:5px;
+	margin-left:300px;
+}
+div p{
+    border: none;
+    text-align: center;
+    font-size: 24px;
+}
+
+ul{
+    list-style-type: none;
+    margin-top: 5px;
+	margin-right:10px;
+	margin-bottom:5px;
+}
+
+ div.label {
+    width:15%;
+    float:left;
+    text-align: right;
+    margin-top: 10px;
+	margin-right:5px;
+	margin-bottom:10px;
+	position: relative;
+	font-weight: bold;
+}
+
+