diff options
| -rw-r--r-- | css/style.css | 15 | ||||
| -rw-r--r-- | index.php | 9 | ||||
| -rw-r--r-- | js/arrows.js | 2 | ||||
| -rw-r--r-- | js/validate_hero.js | 43 |
4 files changed, 67 insertions, 2 deletions
diff --git a/css/style.css b/css/style.css index e6c5e93..76eb6e8 100644 --- a/css/style.css +++ b/css/style.css @@ -125,6 +125,21 @@ form p { margin: 1rem 0px 0.3rem 0px; } + +.hero_form_error { + animation: fadein 0.2s; + background-color: #ff4d4d; + color: #ffffff; + padding-left: 0.5rem; + border-bottom-left-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; + margin-top: -0.2rem; + +} +@keyframes fadein { + from { opacity: 0; } + to { opacity: 1; } +} input { min-width: 300px; border: 1px solid #bbb; @@ -27,17 +27,23 @@ </div> <div class="vcenter"> - <form action="/register.php" method="post"> + <form name="hero_form" action="/register.php" method="post" onsubmit="return validate_hero_form()"> <h2>Get started</h2> <div class="content"> <p>Username</p> <input type="text" id="username" name="username"> + <p id="username-length-error" class="hero_form_error" hidden>Please specify a username</p> + <p>Email address</p> <input type="text" id="email" name="email"> + <p id="email-error" class="hero_form_error" hidden>Invalid email address</p> + <p>Password</p> <input type="password" id="password" name="password"> + <p>Repeat Password</p> <input type="password" id="password2" name="password2"> + <p id="password-error" class="hero_form_error" hidden>Passwords didn't match</p> <input type="submit" value="Sign up"> <p style="font-size: 1.1em;">Already have an account? <a href="login.html">Sign in</a> </div> @@ -52,6 +58,7 @@ </div> <script src="js/arrows.js"></script> + <script src="js/validate_hero.js"></script> </body> <html> diff --git a/js/arrows.js b/js/arrows.js index a23af87..ec7352c 100644 --- a/js/arrows.js +++ b/js/arrows.js @@ -4,7 +4,7 @@ arrows = []; const minSpeed = 3; const maxSpeed = 8; const delay = 1500; -const lifetime = 25000; +const lifetime = 20000; function make_arrow() { const svg = document.getElementById("protoarrow").cloneNode(); diff --git a/js/validate_hero.js b/js/validate_hero.js new file mode 100644 index 0000000..118abbf --- /dev/null +++ b/js/validate_hero.js @@ -0,0 +1,43 @@ + +function clear_hero_errors() +{ + var errors = document.getElementsByClassName("hero_form_error"); + var i; + for (i = 0; i < errors.length; i++) + { + errors[i].hidden = true; + } +} +function validate_hero_form() +{ + var username=document.forms["hero_form"]["username"].value; + var email=document.forms["hero_form"]["email"].value; + var password=document.forms["hero_form"]["password"].value; + var password2=document.forms["hero_form"]["password2"].value; + + var flag=true; + clear_hero_errors(); + + if(username.length==0) + { + document.getElementById("username-length-error").hidden=false; + flag=false; + } + if(!email.match(/\S+@\S+/)) + { + document.getElementById("email-error").hidden=false; + flag=false; + } + if(password !== password2) + { + document.getElementById("password-error").hidden=false; + flag=false; + } + + if(flag) + { + document.getElementById("success").hidden=false; + } + return flag; + +} |