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>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<table>
<tr><td>
<form>
<table>
<p> Register Form </p>
<tr>
<td></td>
<td><div id="message"> </div></td>
</tr>
<tr>
<td class=label>First Name</td>
<td><input type="text" id="fname" placeholder="First Name" value="" size=80% /> </td>
</tr>
<tr>
<td class=label>Last Name </td>
<td><input type="text" placeholder="Last Name" id="lname" value="" size=80% /> </td>
</tr>
<tr>
<td class=label>Email </td>
<td><input type="text" placeholder="Email" id="email" value="" size=80% /> </td>
</tr>
<tr>
<td class=label>Email Confirmation </td>
<td><input type="text" placeholder="Email Confirmation" id="cemail" value="" size=80% /> </td>
</tr>
<tr>
<td class=label>Birthday </td>
<td> <input type="text" placeholder="Birthday" id="bday" value="" size=80% /></td>
</tr>
<tr>
<td class=label> </td>
<td><button onclick="return validate();">Register</button> </td>
</tr>
</table>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<form>
<table>
<p> Register Form </p>
<tr>
<td></td>
<td><div id="message"> </div></td>
</tr>
<tr>
<td class=label><label for="email">First Name</label></td>
<td><input type="text" id="fname" placeholder="First Name" value="" size=90% required="true" /> </td>
</tr>
<tr>
<td class=label>Last Name </td>
<td><input type="text" placeholder="Last Name" id="lname" value="" size=90% /> </td>
</tr>
<tr>
<td class=label>Email </td>
<td><input type="text" placeholder="Email" id="email" value="" size=90% /> </td>
</tr>
<tr>
<td class=label>Email Confirmation </td>
<td><input type="text" placeholder="Email Confirmation" id="cemail" value="" size=90% /> </td>
</tr>
<tr>
<td class=label>Birthday </td>
<td> <input type="text" placeholder="Birthday" id="bday" value="" size=90% /></td>
</tr>
<tr>
<td class=label> </td>
<td><button onclick="return validate();">Register</button> </td>
</tr>
</table>
</form>
</td><tr></table>
<script src="javascript.js"></script>
</body>
<script src="javascript.js">
</script>
</body>
</html>
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(email == cemail) {
function validate() {
//input
var check = true;
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";
check = 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) {
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;
}
}
alert("Thank for your registering");
check = true;
}
else {
message.innerHTML = "Input Error";
check = false;
}
}
else {
message.innerHTML = "Input Error";
check = false;
}
}
return check;
}
stylesheet.css
form {
margin: auto;
border: none;
margin-top: 20px;
margin-left: 420px;
margin-right: 400px;
padding-bottom: 10px;
border: 1px solid black;
}
input {
border-radius: 5px;
float: right;
margin-top: 5px;
margin-right:10px;
margin-bottom:5px;
margin-left: 25px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px;
border-radius: 5px;
float: right;
margin: 5px 5px 5px 25px;
padding: 5px;
}
button {
margin-top: 5px;
margin-right:10px;
margin-bottom:5px;
margin-left: 25px;
background-color: white;
border-radius: 5px;
margin: 5px 10px 5px 25px;
background-color: white;
border-radius: 5px;
}
p{
border: none;
text-align: center;
font-size: 24px;
p {
border: none;
text-align: center;
font-size: 24px;
}
td.label {
text-align: right;
margin-top: 10px;
margin-right:5px;
margin-bottom:10px;
font-weight: bold;
td.label {
text-align: right;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
font-weight: bold;
font-size: 14px;
}
table {
border: 1px ridge gray;
margin-left: 20%;
margin-right: 20%;
border: none;
margin-left: auto;
margin-right: auto;
}
table table {
border: none;
margin-left: 0;
margin-right: 0;
}
#message{
float: right;
width: 95%;
margin-right:15px;
color: #000000;
background-color: #F08080;
#message {
float: right;
width: 96%;
margin-right: 5px;
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