[RUBY] [JavaScript] Comment afficher une alerte en cas d'omission du formulaire de saisie

introduction

Je crée un site EC avec Rails. Lors de l'ajout d'un article au panier, je voulais afficher un pop-up comme celui ci-dessous s'il n'y avait pas de quantité sélectionnée. Cette fois, c'est le mémorandum.

Information supplémentaire

• Ruby 2.5.1
• Ruby on Rails 5.2.4.2

Contenu du formulaire

La page de l'image ci-dessus est le fichier View suivant.

.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, "quantité", class: "showMain__Boxes__rightBox__orderQuantity__title"
          = f.select :quantity, stock_array_maker(@stock), {include_blank: "Veuillez sélectionner"}, {class: "showMain__Boxes__rightBox__orderQuantity__form"}
        .showMain__Boxes__rightBox__line
          .showMain__Boxes__rightBox__line__price
            = "Prix de base: ¥#{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 (Ajouter aux Favoris)
        .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"}

Comment écrire JS

J'obtiens deux nœuds, une balise d'envoi et une balise de sélection de quantité.

$(function(){
  $("#addToCart").on('click', function(e){
    if(document.getElementById('quantity').value === ""){
      alert("Veuillez sélectionner une quantité.");
      return false;
    }else{
      return true;
    }
  })
});

Mis à feu lorsque le bouton d'envoi du formulaire est enfoncé, et s'il n'y a pas de valeur id = f.select: quantité ~, il retourne false et avertit avec une alerte. Si la valeur de retour est vraie, elle sera soumise, et si elle est fausse, elle ne sera pas soumise. En passant, s'il n'y a pas de "return false", une fenêtre contextuelle apparaîtra, mais vous serez redirigé vers la page suivante.

Le JS ci-dessus peut également être effectué par la méthode suivante

$(function(){
  $("#addToCart").on('click', function(e){
    if(!(document.getElementById('quantity').value)){
      alert("Veuillez sélectionner une quantité.");
      return false;
    }else{
      return true;
    }
  })
});

Site de référence

Comment vérifier l'entrée de formulaire avec JavaScript [JavaScript] Comment vérifier les caractères vides [Étude]