[RUBY] [JavaScript] So zeigen Sie eine Warnung an, wenn ein Eingabeformular ausgelassen wurde

Einführung

Ich erstelle eine EC-Site mit Rails. Beim Hinzufügen eines Artikels zum Warenkorb wollte ich ein Popup wie das folgende anzeigen, wenn keine Menge ausgewählt war. Diesmal ist das Memorandum.

Zusatzinformationen

• Ruby 2.5.1
• Ruby on Rails 5.2.4.2

Formularinhalt

Die Seite im obigen Bild ist die folgende Ansichtsdatei.

.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, "Menge", class: "showMain__Boxes__rightBox__orderQuantity__title"
          = f.select :quantity, stock_array_maker(@stock), {include_blank: "Bitte auswählen"}, {class: "showMain__Boxes__rightBox__orderQuantity__form"}
        .showMain__Boxes__rightBox__line
          .showMain__Boxes__rightBox__line__price
            = "Grundpreis: ¥#{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 (Zu Favoriten hinzufügen)
        .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"}

Wie schreibe ich JS

Ich erhalte zwei Knoten, ein Submit-Tag und ein Mengenauswahl-Tag.

$(function(){
  $("#addToCart").on('click', function(e){
    if(document.getElementById('quantity').value === ""){
      alert("Bitte wählen Sie eine Menge.");
      return false;
    }else{
      return true;
    }
  })
});

Wird auf Feuer gesetzt, wenn die Senden-Schaltfläche des Formulars gedrückt wird. Wenn kein ID-Wert von = f.select: Quantity ~ vorhanden ist, wird false zurückgegeben und mit einer Warnung gewarnt. Wenn der Rückgabewert wahr ist, wird er gesendet, und wenn er falsch ist, wird er nicht gesendet. Übrigens, wenn es kein "return false" gibt, erscheint ein Popup, aber Sie werden zur nächsten Seite weitergeleitet.

Das obige JS kann auch mit der folgenden Methode durchgeführt werden

$(function(){
  $("#addToCart").on('click', function(e){
    if(!(document.getElementById('quantity').value)){
      alert("Bitte wählen Sie eine Menge.");
      return false;
    }else{
      return true;
    }
  })
});

Referenzseite

So überprüfen Sie die Formulareingabe mit JavaScript [JavaScript] So suchen Sie nach leeren Zeichen [Studie]