Skip to content

W
web-basic-062018
Commit 6ff60a97 by Đỗ Thụy Hạnh Chuyên
Options

Basic Registration Form

parent 03fe64d5
Showing with 95 additions and 10 deletions
index.html
......@@ -8,64 +8,142 @@
<body>
<div id="form_wrapper">
<h2>Register Form</h2>
<form class="form">
<form class="form" action="#" method="post" onsubmit="return validation();">
<table>
<tr>
<th>
<label for="firstname">First Name</label>
<br>
<span id="firstnamemsg"> </span>
</th>
<td>
<input type="text" name="firstname" placeholder="First Name">
<input type="text" id="firstname" placeholder="First Name">
</td>
</tr>
<tr>
<th>
<label for="lastname">Last Name</label>
<br>
<span id="lastnamemsg"> </span>
</th>
<td>
<input type="text" name="lastname" placeholder="Last Name">
<input type="text" id="lastname" placeholder="Last Name">
</td>
</tr>
<tr>
<th>
<label for="email">Email</label>
<br>
<span id="emailmsg"> </span>
</th>
<td>
<input type="text" name="email" placeholder="Email">
<input type="text" id="email" placeholder="Email">
</td>
</tr>
<tr>
<th>
<label for="emailconfirmation">Email Confirmation</label>
<br>
<span id="emailconfirmationmsg"> </span>
</th>
<td>
<input type="text" name="emailconfirmation" placeholder="Email Confirmation">
<input type="text" id="emailconfirmation" placeholder="Email Confirmation">
</td>
</tr>
<tr>
<th>
<label for="birthday">Birthday</label>
<br>
<span id="birthdaymsg"> </span>
</th>
<td>
<input type="text" name="birthday" placeholder="Birthday">
<input type="text" id="birthday" placeholder="Birthday (dd/mm/yy)">
</td>
</tr>
<tr>
<th></th>
<td>
<input type="submit" name="register" value="Register">
<input type="submit" id="register" value="Register">
</td>
</tr>
</table>
</table>
</form>
</div>
<script type="text/javascript">
function validation() {
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
var email = document.getElementById('email').value;
var emailconfirmation = document.getElementById('emailconfirmation').value;
var birthday = document.getElementById('birthday').value;
var firstnamemsg = document.getElementById('firstnamemsg');
var lastnamemsg = document.getElementById('lastnamemsg');
var emailmsg = document.getElementById('emailmsg');
var emailconfirmationmsg = document.getElementById('emailconfirmationmsg');
var birthdaymsg = document.getElementById('birthdaymsg');
if (firstname == "" || !isNaN(firstname)) {
firstnamemsg.innerHTML = " ** please fill the firstname";
return false;
} else {
firstnamemsg.innerHTML = "";
}
if (lastname == "" || !isNaN(lastname)) {
lastnamemsg.innerHTML = " ** please fill the lastname";
return false;
} else {
lastnamemsg.innerHTML = "";
}
if (email == "") {
emailmsg.innerHTML = " ** please fill the email";
return false;
} else if (email.indexOf('@') <= 0) {
emailmsg.innerHTML = " ** please input valid email";
return false;
} else if (email.charAt(email.length - 4) != '.' && email.charAt(email.length - 3) != '.') {
emailmsg.innerHTML = " ** please input valid email";
return false;
} else {
emailmsg.innerHTML = "";
}
if (emailconfirmation == "" || emailconfirmation != email) {
emailconfirmationmsg.innerHTML = " ** the email addresses below don't match";
return false;
} else {
emailconfirmationmsg.innerHTML = "";
}
if (birthday == "") {
birthdaymsg.innerHTML = " ** please fill the birthday";
return false;
} else if (!birthday.match(/^(0[1-9]|[12][0-9]|3[01])[\- \/.](?:(0[1-9]|1[012])[\- \/.](19|20)[0-9]{2})$/)) {
birthdaymsg.innerHTML = " ** date format is wrong";
return false;
} else {
birthdaymsg.innerHTML = "";
}
var today = new Date();
date = Date.parse(birthday);
if ( today <= date ) {
birthdaymsg.innerHTML = " ** Current or future date is not allowed.";
return false;
} else {
birthdaymsg.innerHTML = "";
}
alert("Thank for registering!");
}
</script>
</body>
</html>
\ No newline at end of file
style.css
......@@ -44,3 +44,8 @@ input[type=submit], select {
width: 6em;
margin-top: 2em;
}
span {
font-size: 12px;
color: red;
}
\ No newline at end of file
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