ColeHorvat / serverless-camp

GNU General Public License v3.0
0 stars 0 forks source link

Week 4: Error Handling Sir this is a Wendys #52

Closed counselorbot[bot] closed 2 years ago

counselorbot[bot] commented 2 years ago

Week 4 Step 2 ⬤⬤◯◯◯◯◯ | 🕐 Estimated completion: 20-25 minutes

Error Handling ~ Sir this is a Wendy's

Demo: 🐰

Ideally, users will fill the web form with the correct information. However, people make mistakes. In this step, we will be implementing some form validation to make sure that a user has inputted text value before submitting their password.

✅ Task:

🚧 Test your Work

Open up your LiveServer plugin and start your server.

‼️ You have three test cases to try
1. **The "correct" way**: Submit both a file and text. Check that you receive "Thanks!" 2. **The "unexpected" way (file)**: Submit a file that is not png or jpeg. Does it work? 3. **The "unexpected" way (text input)**: Try submitting without entering a username. You should get an alert box that says "No name error."

1: Accepting Images as an Input

In HTML Forms, the enctype attribute specifies how the form-data should be encoded when submitting it to the server. Like we learned before, if we want to upload files, we need send form-data encoded as multipart/form-data

    <h1>Bunnimage</h1>
    <form enctype="multipart/form-data">
    <label>Code: </label>

To add the image upload input, add an additional file input within the form & change the submit button's type.

<form enctype="multipart/form-data">
   <input type="file" name="image"></input>
   <input id="username" type="text" placeholder="Enter your file's name">
   <input type="submit" />

2: Input Validation?

We need to validate two things.

❓ How do you check that the image is either .png or .jpeg format
The HTML `` accept Attribute specifies a filter for what file types the user can pick from the file input dialog box. The accept attribute can only be used with . ```html
``` Additionally, the HTML may not catch an invalid file 100% of the time, so we will also need to use JavaScript to do some validation. 1. Once a file is uploaded, you will need to display an error when a file of invalid format is added. 2. Get the [name of the file](https://stackoverflow.com/questions/857618/javascript-how-to-extract-filename-from-a-file-input-control) from the input box (use the `change` event listener for the input) 3. Check if the file is either `.png` or `.jpeg` using [this StackOverflow post](https://stackoverflow.com/questions/8231058/file-type-validation-with-javascript)

❓ How do you check that the text box isn't empty
To validate that the name isn't null, check if `document.getElementById("username").value` isn't empty, to change the `output` div to "Thanks!", or display an `alert("No name error.")` > :bulb: **Hint**: Use your JavaScript conditional skills!

📹 Walkthrough Video

walkthrough video

counselorbot[bot] commented 2 years ago

⏰ Time to merge!

Go ahead and merge this branch to main to move on. Great work finishing this section!

merge

⚠️ If you receive a Conflicts error, simply press Resolve conflicts and you should be good to merge!