Week 4: Error Handling Sir this is a Wendys

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:

[x] 1: Check you are on the bunnimage-frontend branch
[x] 2: Change your HTML form to accept multipart/form-data in index.html
[x] 3: Add a file input to index.html that accepts image/x-png,image/jpeg and add the attribute name=image
[x] 4: Modify the function in index.js to create an alert if either the file input or the name input is null
[x] 5: Modify the button so that it submits the form by changing its type attribute to "submit"
[x] 6: Prevent the page from reloading after submission
[ ] 7: Commit your updated code to bunnimage/index.html and bunnimage/script.js
[ ] 8: Create a pull request to merge bunnimage onto main, and only merge the pull request when the bot approves your changes!

🚧 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

❓ 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!

ShunnShine / Serverless-Camp-2022