소개

Rails에서 EC 사이트를 만들고 있습니다.
장바구니에 상품을 추가 할 때 수량 선택이 없었을 때 다음과 같은 팝업을 표시하고 싶었습니다. 이번은 그 비망록입니다.

보충 정보

Ruby 2.5.1

Ruby on Rails 5.2.4.2

양식 내용

위 사진의 페이지는 다음과 같은 View 파일입니다.

.showMain
  .showMain__Boxes
    .showMain__Boxes__leftBox
      = image_tag @product.image, width: 450, height: 450, class: "showMain__Boxes__leftBox__image"
    .showMain__Boxes__rightBox
      = form_with url: add_item_carts_path, local: true, name: "formForCart" do |f|
        .showMain__Boxes__rightBox__name
          = @product.name
        .showMain__Boxes__rightBox__namejap
          = @product.namejap
        .showMain__Boxes__rightBox__description
          = @product.description
        .showMain__Boxes__rightBox__orderQuantity
          = f.label :quantity, "数量", class: "showMain__Boxes__rightBox__orderQuantity__title"
          = f.select :quantity, stock_array_maker(@stock), {include_blank: "選択してください"}, {class: "showMain__Boxes__rightBox__orderQuantity__form"}
        .showMain__Boxes__rightBox__line
          .showMain__Boxes__rightBox__line__price
            = "本体価格 : ¥#{convertToJPY(@product.price)}"
          .showMain__Boxes__rightBox__line__fav
            - if user_signed_in? && current_user
              - if @product.bookmark_by?(current_user)
                = link_to product_bookmark_path(@product.id), class: "showMain__Boxes__rightBox__line__fav__btn.fav", method: :delete, remote: true do
                  %i.fas.fa-star.star
              - else
                = link_to product_bookmarks_path(@product.id), class: "showMain__Boxes__rightBox__line__fav__btn.fav", method: :post, remote: true do
                  %i.far.fa-star.star-o (お気に入りに追加)
        .showMain__Boxes__rightBox__line
        .showMain__Boxes__rightBox__addCart
          = f.hidden_field :product_id, value: @product.id
          = f.hidden_field :cart_id, value: @cart.id
          = f.submit "Add to Cart", {class: "showMain__Boxes__rightBox__addCart__btn", id: "addToCart"}

JS의 기재 방법

submit 태그, quantity의 select 태그의 2개의 노드를 취득하고 있습니다.

$(function(){
  $("#addToCart").on('click', function(e){
    if(document.getElementById('quantity').value === ""){
      alert("数量を選択してください。");
      return false;
    }else{
      return true;
    }
  })
});

폼의 submit 버튼이 눌렸을 때에 발화하도록(듯이) 설정을 해, = f.select :quantity ~ id의 value가 없는 경우에 false를 돌려주고, 경고로 경고합니다.
반환 값이 true이면 제출하고 false이면 제출하지 않습니다.
덧붙여서 "return false"가 없으면 팝업이 나오지만 다음 페이지로 진행됩니다.

상기 JS는 이하의 방법으로도 OK

$(function(){
  $("#addToCart").on('click', function(e){
    if(!(document.getElementById('quantity').value)){
      alert("数量を選択してください。");
      return false;
    }else{
      return true;
    }
  })
});

참고 사이트

자바 스크립트에서 양식 입력을 확인하는 방법
【JavaScript】 공문자 체크 방법 【공부 중】