freeCodeCamp/use-html5-to-require-a-field.md at 2b9e38a17bd6039a1291f756157c94b3e57955db

Oliver Eyton-Williams 2b9e38a17b

fix: replace .english.md extension with .md

2020-09-29 22:09:04 +02:00

2.4 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
bad87fee1348bd9aedc08830	Use HTML5 to Require a Field	0	https://scrimba.com/p/pVMPUv/cMd4EcQ	18360

Description

You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out. For example, if you wanted to make a text input field required, you can just add the attribute required within your input element, like this: <input type="text" required>

Instructions

Make your text input a required field, so that your user can't submit the form without completing this field. Then try to submit the form without inputting any text. See how your HTML5 form notifies you that the field is required?

Tests

tests:
  - text: Your text <code>input</code> element should have the <code>required</code> attribute.
    testString: assert($("input").prop("required"));

Challenge Seed

<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">
    <button type="submit">Submit</button>
  </form>
</main>

Solution

<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" required placeholder="cat photo URL">
    <button type="submit">Submit</button>
  </form>
</main>

2.4 KiB Raw Blame History