Form-Validation/setFormat.html at master · TDAWebDevBootcamp/Form-Validation · 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
<!DOCTYPE html>
<html>
  <body>

    <form name="myform">
      <label for="uid">User ID:</label>
      <input type = "text" name ="uid" id="uid" required>
      <label for="fname">Name:</label>
      <input type = "text" name ="fname" id="fname" required>
      <label for="pcode">Postcode:</label>
      <input type = "text" name ="pcode" id="pcode" required>
      <input type ="button" value="submit" onclick="validateForm()">
    </form>

    <script>
        function validateForm(){
            var userId = document.forms["myform"]["uid"].value;
            var userIdRegEx = /^\d{4}/;
            var userIdResult = userIdRegEx.test(userId);
            if(userIdResult == false) {
                alert("Please enter a numerical four digit User ID");
                document.forms.myform.uid.style.backgroundColor='#e52213';
                return false;
            }

            var postCode = document.forms["myform"]["pcode"].value;
            var postRegEx = /^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i;
            var postResult = postRegEx.test(postCode);
            if(postResult == false) {
                alert("Please enter a valid post code");
                document.forms.myform.pcode.style.borderColor='#e52213';;
                return false;
            }
        }
     </script>

  </body>
</html>