Lab 5: String Manipulation and Forms
You will start the lab by writing functions that accept strings and numbers as inputs and check them against a set of conditions. In part two, there are a couple validation functions that are a little bit trickier. Finally, you will create a web page sign up form that uses the techniques from the first two sections to validate user input and provide quick feedback if they typed something wrong.
Part One - Input Validation
Hint: Try skimming through this page: https://www.w3schools.com/js/js_string_methods.asp for an overview of the important methods that exist on strings. These will help a lot with the problems below.
Please write a function that takes a numeric age as an input and checks if the age is acceptable for a user of your site. An age is acceptable if:
- The user is at least 13 years old
- The user is no older than the oldest human alive today
Please write a function that takes a single string as an input and returns a boolean for whether or not the string is a valid first or last name. A name is valid if:
- It starts with a capital letter
- All other letters are lowercase
- It is only one word (no spaces)
A user must supply a strong password to the site. It cannot:
- Have less than 6 characters
- Be a single character repeated forever (eg "aaaaaaaaa")
- Include the first or last name
- Be in a list of most commonly used passwords
Please write a function that takes four parameters:
- The password (string)
- The first name (string)
- The last name (string)
- An array of commonly used passwords (array of strings)
Remember that you should not hardcode values for any of these parameters when defining your function. The person who calls your function might call it like ("toaster123", "Bob", "Jones", ["password", "test"]) and you would check that "toaster123" does not include "Bob" or "Jones" and is not "password" or "test"
There is feature in many programming languages called regular expressions. It can make this section a lot easier but requires a bit more upfront reading / research. https://regexone.com/ has a quick Regular Expressions game if you want to learn. You do not need Regular Expressions to finish this part of the lab though so also feel free to solve this section with what we already know
Please write a function that takes a single phone number (string) as an input and returns a boolean for whether or not the phone number is valid. You are expecting phone numbers in the format: "###-###-#### ext ####". The extension part is optional.
Please write a function that takes a username (string) and a list of taken usernames (array of strings) as inputs and returns a boolean for whether or not it is valid. A username is valid if it starts with a letter, contains only letters and numbers and optionally ends with a !
For this part of the lab, you will be creating a little HTML and CSS page that will act as a sign-up form for another website. You must collect at least the following information about the user:
- First Name
- Last Name
- Phone number
You also must make sure the data they enter is valid. Therefore, as soon as a user starts typing, you should give feedback about whether they have entered a valid value for the field. You can use either the oninput or onchange attribute of your input elements to link up to each of the functions you wrote above. You can also use the addEventListener function we talked about last class.
If the user provides an invalid value, please display red text under the matching input explaining that they have made an error. The error message should of course also go away when they fix their mistake. There should only one version of a given error message at a time. If a user makes the same mistake multiple times, the page should not show duplicate errors.
You can manage error messages with CSS or by adding/removing elements from the page. I added some sample code at the bottom of this lab to get started with the layout and style of the form. You can use or modify it as you see fit.
Extra credit will be awarded if you can provide a more detailed error message about exactly what was wrong with the first / last name and password.
validations.js. It should also contain an HTML file called
Your HTML file should use mostly the same functions as you wrote in
validations.js. These functions may need a bit of tweaking to work if called directly from the page. If you decide to tweak these functions, please maintain a separate copy of
validations.js from part one and link a new file,
validations-html.js in your HTML. Note that you do not necessarily need to create separate versions of these functions but you may need to be smart about how you call them if you do not.
validations.js file, another file altogether, or in the
signup.html file. Do whatever helps you organize your code best. I have opinions about this but decide for yourself what seems cleanest. Make sure to include any additional files in your final zip file!
The main things I am looking for in this lab are:
- Correctness of validation functions
- Validation functions are linked to your sign up form and trigger when the user changes the input
- Error messages are added to the page and removed from the page in response to user input.
- Duplicate errors are not shown. Errors are not shown once the response is correct.
<html> <head> <title>MyFace</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </head> <body> <div class="container"> <h1>Welcome to MyFace! Please give us your data!</h1> <form> <div class="form-row"> <div class="form-group col-md-6"> <label for="firstName">First Name</label> <input type="text" class="form-control" id="firstName" placeholder="First Name"> </div> <div class="form-group col-md-6"> <label for="lastName">Last Name</label> <input type="text" class="form-control" id="lastName" placeholder="Last Name"> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="age">Age</label> <input type="number" class="form-control" id="age" placeholder="Age"> </div> <div class="form-group col-md-6"> <label for="phone">Phone Number</label> <input type="text" class="form-control" id="phone" placeholder="###.###_#### ext ####"> </div> </div> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" placeholder="Username"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> </body> </html>