Как реализовать валидацию на размер, при добавлении товара в корзину?
Подскажите, как дописать JS для отправки товара в корзину? Хочу добавить валидацию: если размер не выбран, выводилось бы сообщение - "выберите размер". Ну и не происходила бы отправка, та что я сделал в примере.
Хочу выводить ошибку в классе ax-result.
Сам скрипт отправки по кнопке я сделал (на сайте работает), а вот валидацию в скрипт не смог внедрить. По идее, сначала должна срабатывать валидация, и если размер выбран, то всё о’кей, и товар уходит.
Что касаемо <select>, то у меня там заглушка - <option>Выбрать размер</option> без value. Не будет ли считаться это выбором? Если будет, то как сделать, чтобы не считалось?
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 > 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 < 2) {
drob = '0' + drob;
}
jQuery('.basket').html('<i class="icon-corz"></i><span>' + data.qty + '</span>');
jQuery($this).addClass('active').html('<i class="icon-addcorz"></i>В корзине');
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>
Ответы (1 шт):
Решение:
$('.ax-result').addClass('validerror').html('Выберите размер');