cbendixWEB150/formBendix.html at master · neonsigh/cbendixWEB150 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*
Christopher Bendix
WEB150 3237
Homework 4 - Pass / Fail
*/

<!DOCTYPE html>
<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>

<h1>Functions & validation</h1>

<form id="form1" action="#" onsubmit="return validateForm(this);">
  first name: <input type="text" name="firstname"><br>
  last name: <input type="text" name="lastname"><br>
  password: <input type="text" name="password"><br>

  <button >Check</button>
</form>

<hr><div id="message"></div>

<script>

function validateForm(myForm) {

  var firstname = myForm.firstname.value; // get text of firstname field
  var lastname = myForm.lastname.value;
  var password = myForm.password.value;
  // use this syntax to update 'message' DIV with appropriate wording
  $("#message").html("Button clicked");

// Form validation code goes here

 if (firstname.length == 0) {
  $("#message").html("Please retry first name entry");
 } else if (lastname.length == 0) {
  $("#message").html("Please retry last name entry");
 } else if (!validPassword(password)) {
  $("#message").html("Please resubmit valid password");
 } else {
  $("#message").html("Details saved and password set.");

 };
    return false; // prevent page reload
};

function validPassword(password) {
    if (password.length < 8 || password == password.toLowerCase() || password == password.toUpperCase()) {
        return false;
        } else {
        return true;
        }
    return false; // prevent page reload
};

</script>

</body>
</html>