본문 바로가기
회고록

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

by 경험을 기록하다. 2023. 12. 4.

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. 오류