SHOW:
|
|
- or go back to the newest paste.
1 | <!DOCTYPE html> | |
2 | <html> | |
3 | <head> | |
4 | <title>Oppgave 1-3</title> | |
5 | <meta charset="UTF-8" /> | |
6 | <link href="reg.css" rel="stylesheet" type="text/css" /> | |
7 | <script> | |
8 | ||
9 | window.onload = main; | |
10 | var okPass = false; | |
11 | var okNavn = false; | |
12 | ||
13 | function main() { | |
14 | document.getElementById("reg").onclick = registration; | |
15 | } | |
16 | - | if() { |
16 | + | |
17 | function registration() { | |
18 | if(okPass && okNavn) { | |
19 | document.getElementById("utskrift").innerHTML = "Welcome to the club!" | |
20 | } | |
21 | } | |
22 | function checkUse() { | |
23 | var user = document.getElementById("user"); | |
24 | var message = document.getElementById("error-use"); | |
25 | var goodColor = "#66cc66"; | |
26 | var badColor = "#ff6666"; | |
27 | ||
28 | if(user.value == "") { | |
29 | user.style.backgroundColor = badColor; | |
30 | message.style.color = badColor; | |
31 | message.innerHTML = "need username" | |
32 | } | |
33 | else { | |
34 | user.style.backgroundColor = goodColor; | |
35 | message.style.color = goodColor; | |
36 | message.innerHTML = "ok!" | |
37 | } | |
38 | } | |
39 | ||
40 | function checkPass() { | |
41 | ||
42 | var pass1 = document.getElementById("pass1"); | |
43 | var pass2 = document.getElementById("pass2"); | |
44 | var message = document.getElementById("error-nwl"); | |
45 | var goodColor = "#66cc66"; | |
46 | var badColor = "#ff6666"; | |
47 | ||
48 | if(pass1.value.length > 5) { | |
49 | pass1.style.backgroundColor = goodColor; | |
50 | message.style.color = goodColor; | |
51 | message.innerHTML = "character number ok!" | |
52 | okPass = true; | |
53 | } | |
54 | else { | |
55 | pass1.style.backgroundColor = badColor; | |
56 | message.style.color = badColor; | |
57 | message.innerHTML = " you have to enter at least 6 digit!" | |
58 | okPass = false; | |
59 | return; | |
60 | } | |
61 | ||
62 | if(pass1.value == pass2.value) { | |
63 | pass2.style.backgroundColor = goodColor; | |
64 | message.style.color = goodColor; | |
65 | message.innerHTML = "ok!" | |
66 | } | |
67 | else { | |
68 | pass2.style.backgroundColor = badColor; | |
69 | message.style.color = badColor; | |
70 | message.innerHTML = " These passwords don't match" | |
71 | } | |
72 | } | |
73 | ||
74 | ||
75 | ||
76 | </script> | |
77 | </head> | |
78 | <body> | |
79 | ||
80 | <h2>Registration</h2> | |
81 | ||
82 | <input name="username" type="username" placeholder="username" id="user" onkeyup="checkUse(); return false;"/> <output id="error-use"></output> <br/> | |
83 | ||
84 | <input name="password" type="password" placeholder="password" id="pass1" onkeyup="checkPass(); return false;" /> <br/> | |
85 | ||
86 | <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" /> <output id="error-nwl"></output> <br/> | |
87 | ||
88 | <button id="reg" type="button">Register</button> <br/> | |
89 | ||
90 | <output id="utskrift"></output> | |
91 | ||
92 | ||
93 | </body> | |
94 | </html> |