Я работаю над модалом, который добавляет продукт. Модал имеет отдельные вкладки, которые необходимы для добавления деталей. Вопрос в том, как я могу справиться с проверкой.
Каждая вкладка имеет собственную форму и кнопка отправки одинакова. Также «обязательное» правило не работает. Любая помощь, пожалуйста?
Редактировать: HTML-код добавлен. Не читайте описание после здесь. Поскольку текст в основном код, поэтому мне нужно добавить описание. Также есть способ решить эту проблему.
<div class="modal fade" id="product_add_modal" tabindex="-1" role="dialog" aria-labelledby="tab_modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header p-b-15">
<h4 class="modal-title">Product Setup</h4>
<ul class="card-actions icons right-top">
<a href="javascript:void(0)" data-dismiss="modal" class="text-white" aria-label="Close">
<i class="zmdi zmdi-close"></i>
</a>
</ul>
</div>
<div class="modal-body p-0">
<div class="tabpanel">
<ul class="nav nav-tabs p-0">
<li class="active" role="presentation"><a href="#product_add_general" data-toggle="tab" aria-expanded="true">General Info</a></li>
<li role="presentation"><a href="#product_add_images" data-toggle="tab" aria-expanded="true">Product Images</a></li>
<li role="presentation"><a href="#product_add_price" data-toggle="tab" aria-expanded="true">Price</a></li>
<li role="presentation"><a href="#product_add_inventory" data-toggle="tab" aria-expanded="true">Inventory</a></li>
<li role="presentation"><a href="#product_add_shipping" data-toggle="tab" aria-expanded="true">Shipping</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fadeIn active" id="product_add_general">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form class="form-horizontal" action="/somewhere" method="POST">
@csrf
<div class="form-group label-floating is-empty">
<label class="control-label">Title</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group">
<textarea id="add_product_desc" required></textarea>
</div>
<div class="chips chips-placeholder"></div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_images">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form action="#" class="dropzone" id="product_add_images_form" enctype="multipart/form-data"></form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_price">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Price</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Compare at price</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="togglebutton m-b-15 ">
<label>
<input type="checkbox" class="toggle-info" checked> Charge taxes on this product
</label>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_inventory">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="control-label">SKU (Stock Keeping Unit)</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<label class="control-label">Barcode (ISBN, UPC, GTIN, etc.)</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="" class="control-label">Inventory policy</label>
<select class="select form-control">
<option selected>Don't track inventory</option>
<option>Track this product's inventory</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="tab-pane fadeIn" id="product_add_shipping">
<div class="card card p-20 p-t-10 m-b-0">
<div class="card-body">
<form>
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Width</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Height</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating is-empty">
<label class="control-label">Depth</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<label class="control-label">Weight</label>
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn suffix-select">
<select class="select form-control">
<option>lb</option>
<option>kg</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group label-floating is-empty">
<div class="input-group">
<span class="input-group-addon">$</span>
<label class="control-label">Extra Shipping Fee</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Add Product</button>
</div>
</div>
<!-- modal-content -->
</div>
<!-- modal-dialog -->
</div>
</div>