How do you get a size validation when you add the product to the basket?



  • Can you tell me how to finish the JS to send the goods to the basket? I'd like to add a validation: if the size was not chosen, the message would be "size the size." Well, there wouldn't be a shipment that I did in the example.

    I want to make a mistake in class. ax-result

    I've done the squeaking on the button myself, and I haven't been able to infiltrate the evidence. I think it should be the first time that the Validation works, and if the size is chosen, it's all o'ckey and the goods go.

    What is touched <select>I've got a lipstick. <option>Выбрать размер</option> free value♪ Would that be a choice? If it does, how do you not count?

    jQuery(document).ready(function() {
      //добавить товар в корзину
      jQuery(document).on("click", '.faddtov', function() {
        if (!jQuery(this).hasClass('active')) {
          var $this = this;
    
      price = $($this).parents('.ftovrp').find('.getPrice').data('price');
      qty = $($this).parents('.ftovr').find('.fkolvo').val();
      razmer = $($this).parents('.ftovr').find('#tovrazmer').val();
      product_id = jQuery($this).data('id');
    
      var data = {};
      data.price = price;
      data.product_id = product_id;
      data.qty = qty;
      data.razmer = razmer;
    
      jQuery.ajax({
        url: 'https://' + location.host + '/ax/cart/addtov',
        type: 'POST',
        dataType: 'json',
        data: { data: data },
        success: function(data) {
          if (data.qty &gt; 0) {
            console.log($("#basket"));
            $("#basket").removeClass("empty");
          }
    
          totNum = number_format(data.total, 0, '.', ' ');
    
          var drob = String(Math.round((data.total - Math.floor(data.total)) * 100));
          if (drob.length &lt; 2) {
            drob = '0' + drob;
          }
    
          jQuery('.basket').html('&lt;i class="icon-corz"&gt;&lt;/i&gt;&lt;span&gt;' + data.qty + '&lt;/span&gt;');
          jQuery($this).addClass('active').html('&lt;i class="icon-addcorz"&gt;&lt;/i&gt;В корзине');
          window.location.hash = '#win3';
        }
      });
      return false;
    }
    

    });
    });

    .ftovrp {
    margin: 30px;
    }

    .ftov {
    margin-top: 70px;
    }

    .ftovl {
    width: 60%;
    margin-right: 70px;
    }

    .ftovr {
    width: 40%;
    position: relative;
    }

    .ftovr h1,
    .ftovl h1 {
    font-size: 16px;
    margin: -5px 0 10px 0;
    color: #282725;
    }

    .ftovl h1 {
    margin: -5px 0 15px 0;
    border-bottom: none;
    padding-bottom: 0;
    display: none;
    }

    .ftovbf {
    width: 80%;
    position: relative;
    }

    .ftovbf img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    }

    .ftovmf {
    width: 20%;
    margin-left: 20px;
    }

    .ftovrp b {
    font-weight: 400;
    color: #7b7f88;
    display: block;
    margin-bottom: 5px;
    }

    .bl4 strong {
    color: #282725;
    font-weight: 400;
    }

    .fltr {
    display: block;
    color: #5db6b4;
    margin-bottom: 15px;
    }

    .fltr:hover {
    color: #282725;
    }

    .faddtov {
    display: inline-block;
    min-width: 140px;
    height: 55px;
    line-height: 55px;
    background: #6FC4C3;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    font-weight: 600;
    }

    .faddtov:hover {
    background: #282725;
    }

    .faddtov.active {
    background: #282725;
    cursor: default;
    }

    .getPrice {
    margin-bottom: 70px;
    }

    .getPrice b {
    width: 50%;
    }

    .sprs strong {
    font-size: 20px;
    color: #FF2525;
    font-weight: 600;
    font-family: 'arial', sans-serif;
    }

    .sprs strong span {
    font-size: 14px;
    color: #282725;
    font-weight: 400;
    margin-right: 5px;
    }

    .proz {
    position: relative;
    opacity: 0.4;
    -moz-opacity: 0.4;
    filter: alpha(opacity=40);
    }

    .proz:before {
    border-bottom: 2px solid #818181;
    position: absolute;
    content: "";
    width: 20%;
    height: 65%;
    transform: rotate(-12deg);
    margin-left: -2px;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

    <div class="ftovrp">
    <h2>Название товара</h2>
    <br/>
    <b class="bl4">Артикул:<strong> 199956</strong></b>
    <b class="bl4">Производитель:<strong> Россия</strong></b>
    <a href="#win4" title="" class="fltr">Подобрать свой точный размер</a>
    <div class="fltce">
    <select name="tovrazmer" id="tovrazmer" class="js-select2">
    <option>Выбрать размер</option>
    <option value="S">S</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="XXL">XXL</option>
    </select>
    </div>
    <br/>
    <b class="bl4 colortov">Цвет:<strong> темно-синий</strong></b>
    <div class="getPrice">
    <b class="sprs proz">Цена<br /> <strong class="fsum">1 000<span>,00 ₽</span></strong></b>
    <b class="sprs">Цена со скидкой<br /><strong class="fsuma">800<span>,00 ₽</span></strong></b>
    <br/>
    <a href="javascript:void(0)" class="faddtov"><i class="icon-addcorz"></i>В корзину</a>
    </div>
    <div class="ax-result"></div>
    </div>



  • Decision:

    $ '.ax-result'.addClass('validerror').html.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2