[회고록] 웹 개발 프로젝트하고 공부한 흔적 남기기 (3편)

1. 폼 유효성 검사 novalidate, required 속성 사용

<form

      action="/campgrounds/<%= campground._id %>?_method=PUT"

      method="post"

      class="validated-form"

      novalidate

    >

      <div class="mb-3">

        <label for="title" class="form-label">title</label>

        <input

          type="text"

          id="title"

          class="form-control"

          name="campground[title]"

          value="<%= campground.title %>"

          required

        />

        <div class="valid-feedback">Looks good!</div>

      </div>

      <div class="mb-3">

        <label for="location" class="form-label">location</label>

        <input

          type="text"

          id="location"

          class="form-control"

          name="campground[location]"

          value="<%= campground.location %>"

          required

        />

        <div class="valid-feedback">Looks good!</div>

      </div>

      <div class="mb-3">

        <label for="image" class="form-label">image url</label>

        <input

          type="text"

          id="image"

          class="form-control"

          name="campground[image]"

          value="<%= campground.image %>"

          required

        />

        <div class="valid-feedback">Looks good!</div>

      </div>

      <div class="mb-3">

        <label for="price" class="form-label">campground price</label>

        <div class="input-group">

          <span id="price-label" class="input-group-text">$</span>

          <input

            type="text"

            class="form-control"

            id="price"

            placeholder="0.00"

            aria-label="price"

            aria-describedby="price-label"

            name="campground[price]"

            value="<%= campground.price %>"

            required

          />

          <div class="valid-feedback">Looks good!</div>

        </div>

      </div>

      <div class="mb-3">

        <label for="description" class="form-label">description url</label>

        <textarea

          type="text"

          id="description"

          class="form-control"

          name="campground[description]"

          required

        >

<%= campground.description %>"</textarea

        >

        <div class="valid-feedback">Looks good!</div>

      </div>

      <div class="mb-3">

        <button class="btn btn-info">update campground</button>

      </div>

    </form>

 

2. 오류