Open thereisnodeveloper opened 1 year ago
I do not have this issue. The link it has for More Info, what does that tell you?
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?
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.
I also see this behaviour. Will have to investigate.
@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:
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>
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
This seems to be a curriculum issue - I'll transfer to that repo so this gets better visibility.
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.
@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.
@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.
@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.
@davidomullan
It requires the log in so only team members can fix this. I'll take a look.
This issue is stale because it has had no activity for the last 30 days.
Complete the following REQUIRED checkboxes:
Bug: brief description of bug
format, e.g.Bug: Lesson complete button does not update on click
The following checkbox is OPTIONAL:
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:
3. Expected Behavior:
4. Desktop/Device: Original issue: VM Xubunutu + Chrome
Was able to replicate on: Windows + Chrome & Firefox & Edge
5. Additional Information: