Doubt related to the warning or pop-up that's shown up when I try to submit form without filling it up

Tell us what’s happening:
I run the test and everything was ok ,but I had this little doubt, does this pop-up or warning that shows up when I try to submit the form without filling it up is created and desinged (the way that it looks)automatically by google chrome(the web browser)? is created by HTML?
or I have to make a special desing for it in CSS in order to make the pop-up looks like yours
image
Your code so far


<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
  <li>cat nip</li>
  <li>laser pointers</li>
  <li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
  <li>flea treatment</li>
  <li>thunder</li>
  <li>other cats</li>
</ol>
<form action="https://freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.128 Safari/537.36.

Challenge: Use HTML5 to Require a Field

Link to the challenge:

It is something the browser does because you have a required attribute in the input. It tells the browser to not submit until there is something there. If you remove that required attribute, it won’t care.

1 Like

why the pop up does it looks different in each website?
The FCC showns the pop up with that appareance but in others web sites forms the pop up it have other appareance
(This is the reason why I thought that the developers of the web site must have to desing the appareance of the pop up)
I’m using the same web brower but the pop up is different in each website

I would need examples, but I would expect each browser to have a slightly different implementation. And keep in mind that this is just what HTML offers - many modern sites are going to be using a JavaScript powered form library so it may look and work differently.

1 Like

Thanks!
I’ll search examples

As said, the style of the message depends on the browser. Not sure, but they might be shadow dom elements that are used for the message box.

In any case, you do not have direct access to the message elements (as far as I know). You can change the text displayed fairly easily but for the elements (the message box) you have to create your own elements to use for the messages instead of the build-in.

https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.