Bug: Codepen referrer error in Intermediate CSS & HTML -> Form Validation -> Min Validation

[thereisnodeveloper]

Complete the following REQUIRED checkboxes:

• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [x] The title of this issue follows the Bug: brief description of bug format, e.g. Bug: Lesson complete button does not update on click

The following checkbox is OPTIONAL:

• [ ] I would like to be assigned this issue to work on it

---

1. Description of the Bug:

[https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-form-validation]

Unable to run CodePen and do the form validation test due to this error: "A referer from CodePen is required to render this page view, and your browser is not sending one (more details)."

Clicking on "Edit on Codepen" and pulling up the external Codepen website, gives a similar error.

2. How To Reproduce:

1. Sign in
2. Visit page https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-form-validation
3. Scroll down to Min validation section
4. Enter any number into the form inside CodePen (doesn't matter if valid or invalid), and hit run

3. Expected Behavior:

1. Sign in
2. Visit page https://www.theodinproject.com/lessons/node-path-intermediate-html-and-css-form-validation
3. Scroll down to Min validation section
4. Enter any number into the form inside CodePen (doesn't matter if valid or invalid), and hit run
5. Codepen should produce some message giving feedback on the form input, i.e. "number is invalid"

4. Desktop/Device: Original issue: VM Xubunutu + Chrome

Was able to replicate on: Windows + Chrome & Firefox & Edge

5. Additional Information:

[UniquePixels]

I do not have this issue. The link it has for More Info, what does that tell you?

[UniquePixels]

I also see in your screenshots that your screen is not the same as mine. Are you accessing lessons from a BootCamp, or directly at theodinproject.com?

[thereisnodeveloper]

hi, the link talks about missing a Referer header and why Codepen requires it. Sharing the link below.

https://blog.codepen.io/2017/10/05/regarding-referer-headers/

I'm accessing directly at theodinproject.com.

Also, FYI when I tested on Edge & Firefox, neither had any additional extensions installed.

[CouchofTomato]

I also see this behaviour. Will have to investigate.

[davidomullan]

@CouchofTomato I am not seeing this behavior for invalid entries (i.e. for forms-min-validation when clicking submit while 0 is entered produces the validation "Value must be greater than or equal to 1"). The error @fomosort noted seems to occur when the submit button is clicked and the form method/action is executed. This occurs whenever the form deems it a valid entry (can be empty if no required symbol).

Examples:

1. This displays the validations "Fill out this field" and "Enter an email address", but displays the error on valid emails:

     <input type="email" id="user_email" name="user_email" required>
   

2. This produced the error when submitted with an empty field or valid emails:

   <input type="email" id="user_email" name="user_email">
   

In fact, all of the embedded CodePen blocks are displaying "A referer from CodePen is required to render this page view, and your browser is not sending one" on submission of valid entries.

I think the error message is in response to the following method/action in every block.

<form action="#" method="get">

Technically, this section is only teaching form validations so it's only required to show the response to invalid entries, but getting an error for valid entries is probably distracting for students. I recommend just changing the form to an alert or something to show the value entered. Should clear any issues with missing href's.

Potential Solution: Below code in my codepen

<form action="javascript:alert(this.quantity.value);">
  <div>
    <label for="quantity">Quantity</label>
  </div>
  <input type="number" id="quantity" name="quantity" min="1" value="0">
  
  <div>
    <button type="submit">Place Order</button>
  </div>
</form>

Testing ENV: OS: MacOS Ventura 13.4.1 Browser: Safari 16.5.2

[KevinMulhern]

This seems to be a curriculum issue - I'll transfer to that repo so this gets better visibility.

[codyloyd]

I wonder if we just need to redo the "export" from Codepen to fix the iframe code on this one. I'm not entirely sure what the error is referring to... but it shouldn't be that hard to fix.

[CouchofTomato]

@codyloyd

I think the easiest solution would be to just make sure the form doesn't submit when valid

<form action="#" method="get" onsubmit="return false;"> should do the trick.

[CouchofTomato]

@davidomullan

Hey, I'm sorry for the long radio silence on this. Agree with what you've said, we just need to either stop the form submitting or as you say, alert the value. I'm happier to just do nothing and block the form submission if it's successful but if you have an opinion on it I'm happy to hear it.

[davidomullan]

@CouchofTomato I think you're right, simplest solution is often the best. onsubmit="return false;" is a good way to display the validation messages we are trying to highlight and not worry about anything else.

How does one push a change request to the CodePen? Do some of the maintainers have access? In which case I'd be happy to write up each pen URL and code block that needs to be copy-pasted into them.

[CouchofTomato]

@davidomullan

It requires the log in so only team members can fix this. I'll take a look.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.

[mao-sz]

Closing as the lessons specifically instruct to test the relevant codepen forms with certain values (which will be invalid and trigger the validation, preventing submission).