Skip to content

B
Basic_Registration_form
Commit 2c2c3b05 by Thi Thanh Yen Hoang
Options

update third commit

parent 1f2c9964
Showing with 107 additions and 132 deletions
Untitled Folder @ 596cee67
Subproject commit 596cee675ee1c18e25584f74c8c64c046fa841a1
bt.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/> <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title> <title>Result</title>
</head> </head>
<body> <body>
<form>
<table> <table>
<tr><td> <p> Register Form </p>
<form> <tr>
<table> <td></td>
<p> Register Form </p> <td><div id="message"> </div></td>
<tr> </tr>
<td></td> <tr>
<td><div id="message"> </div></td> <td class=label><label for="email">First Name</label></td>
</tr> <td><input type="text" id="fname" placeholder="First Name" value="" size=90% required="true" /> </td>
<tr> </tr>
<td class=label>First Name</td> <tr>
<td><input type="text" id="fname" placeholder="First Name" value="" size=80% /> </td> <td class=label>Last Name </td>
</tr> <td><input type="text" placeholder="Last Name" id="lname" value="" size=90% /> </td>
<tr> </tr>
<td class=label>Last Name </td> <tr>
<td><input type="text" placeholder="Last Name" id="lname" value="" size=80% /> </td> <td class=label>Email </td>
</tr> <td><input type="text" placeholder="Email" id="email" value="" size=90% /> </td>
<tr> </tr>
<td class=label>Email </td> <tr>
<td><input type="text" placeholder="Email" id="email" value="" size=80% /> </td> <td class=label>Email Confirmation </td>
</tr> <td><input type="text" placeholder="Email Confirmation" id="cemail" value="" size=90% /> </td>
<tr> </tr>
<td class=label>Email Confirmation </td> <tr>
<td><input type="text" placeholder="Email Confirmation" id="cemail" value="" size=80% /> </td> <td class=label>Birthday </td>
</tr> <td> <input type="text" placeholder="Birthday" id="bday" value="" size=90% /></td>
<tr> </tr>
<td class=label>Birthday </td> <tr>
<td> <input type="text" placeholder="Birthday" id="bday" value="" size=80% /></td> <td class=label> </td>
</tr> <td><button onclick="return validate();">Register</button> </td>
<tr> </tr>
<td class=label> </td> </table>
<td><button onclick="return validate();">Register</button> </td>
</tr>
</table>
</form> </form>
</td><tr></table> <script src="javascript.js">
</script>
<script src="javascript.js"></script> </body>
</body>
</html> </html>
javascript.js
function validate() function validate() {
{ //input
//input var check = true;
var firstname = document.getElementById("fname").value; var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value; var lastname = document.getElementById("lname").value;
var email = document.getElementById("email").value; var email = document.getElementById("email").value;
var cemail = document.getElementById("cemail").value; var cemail = document.getElementById("cemail").value;
var bday = document.getElementById("bday").value; var bday = document.getElementById("bday").value;
var alphabeta = /[a-zA-Z]+$/;
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 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})+$/;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; //message
var message = document.getElementById("message");
//message // Validate
var message = document.getElementById("message"); if (firstname == "" || lastname == "" || email=="" || cemail=="" || bday=="" ) {
message.innerHTML = "Input Error";
// Validate check = false;
if (firstname == ""||lastname == ""||email==""||cemail==""|bday==""){ }
message.innerHTML = "Input Error"; else {
message.style.color = "red"; if (email == cemail) {
return false;
}
else{
if(email == cemail) {
if (alphabeta.test(firstname) == true && alphabeta.test(lastname) == true && date.test(bday) == true && filter.test(email) == true && filter.test(cemail) == true) { if (alphabeta.test(firstname) == true && alphabeta.test(lastname) == true && date.test(bday) == true && filter.test(email) == true && filter.test(cemail) == true) {
alert("Thank for your registering"); alert("Thank for your registering");
return true; check = true;
} }
else { else {
message.innerHTML = "Input Error"; message.innerHTML = "Input Error";
message.style.color = "red"; check = false;
return false; }
} }
} else {
else { message.innerHTML = "Input Error";
message.innerHTML = "Input Error"; check = false;
message.style.color = "red"; }
return false; }
} return check;
}
} }
stylesheet.css
form { form {
margin: auto; margin-top: 20px;
border: none; margin-left: 420px;
margin-right: 400px;
padding-bottom: 10px;
border: 1px solid black;
} }
input { input {
border-radius: 5px; border-radius: 5px;
float: right; float: right;
margin-top: 5px; margin: 5px 5px 5px 25px;
margin-right:10px; padding: 5px;
margin-bottom:5px;
margin-left: 25px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
} }
button { button {
margin-top: 5px; margin: 5px 10px 5px 25px;
margin-right:10px; background-color: white;
margin-bottom:5px; border-radius: 5px;
margin-left: 25px;
background-color: white;
border-radius: 5px;
} }
p{ p {
border: none; border: none;
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
} }
td.label {
td.label { text-align: right;
text-align: right; margin-top: 10px;
margin-top: 10px; margin-right: 5px;
margin-right:5px; margin-bottom: 10px;
margin-bottom:10px; font-weight: bold;
font-weight: bold; font-size: 14px;
} }
table { table {
border: 1px ridge gray; border: none;
margin-left: 20%; margin-left: auto;
margin-right: 20%; margin-right: auto;
} }
#message {
table table { float: right;
border: none; width: 96%;
margin-left: 0; margin-right: 5px;
margin-right: 0; color: #000000;
} background-color: #F08080;
#message{
float: right;
width: 95%;
margin-right:15px;
color: #000000;
background-color: #F08080;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment