I have tow taps bootstrap each one has a different form like how can I validate them individual ..:
<div class="tab-content">
<div id="Drinks" class="container tab-pane active"><br>
<div class="col-md-12 pl-0">
<form method="POST" id="validFormCoffeeDrinks" action="{{ route('salesAddDrinks.product') }}" >
@csrf
<div class="form-group">
<div class="form-row">
<div class="col-md-10" role="alert">
<select name="category_salesCoffeeDrinks" id="category_salesCoffeeDrinks" class="form-control">
<option value="0">{{ __('messages.Select Category') }}</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div id="container_template_Drinks" class="col-md-10">
// many checkbooks
<input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="{{$item->id}}"
{{$item->quantity == 0 ? 'disabled' : ''}} >
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 text-left">
<button type="submit" name="drinks_submit" class="btn btn-dark btn-sm mt-2">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div id="BarcodeProducts" class="container tab-pane fade"><br>
<div class="col-md-12 pl-0">
<form method="POST" id="validFormCoffee" action="{{ route('salesAdd.product') }}">
@csrf
<div class="form-group">
<div class="form-row">
<div class="col-md-10">
<select name="category_salesCoffee" id="category_salesCoffee" class="form-control">
<option value="0">{{ __('messages.Select Category') }}</option>
@if(count($category)>0)
@foreach ($category as $item)
<option value={{$item->id}}> | {{$item->name}} |</option>
@endforeach
@else
<option value="0">{{ __('messages.no_category') }} </option>
@endif
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div id="container_template_BarcodeProducts" class="col-md-10">
// many checkbooks
<input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="{{$item->id}}"
{{$item->quantity == 0 ? 'disabled' : ''}} >
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 text-left">
<button type="submit" name="BarcodeProducts_submit" class="btn btn-dark btn-sm ">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
in javascript jquery validation:
$('form#validFormCoffeeDrinks').on('submit', function (event) {
var category_id = $('#category_salesCoffeeDrinks').val();
if (category_id == 0) {
alert("Choose a Category First.");
return false;
}
if (!$('input[type=checkbox]').is(":checked")) {
alert("Choose a Product First.");
return false;
} else {
var out = true;
$('input[type=checkbox]').each(function () {
if ($(this).is(":checked")) {
product_name = $(this).parent().siblings('td#product_name').text();
if (!$(this).parent().siblings('td').find('input[type=number]').val()) {
alert("Choose Quantity for Product " + product_name );
out = false;
return false;
}
}
});
if (out == false)
return false;
}
});
$('form#validFormCoffee').on('submit', function (event) {
if (!$('input[type=checkbox]').is(":checked")) {
alert("Choose a Product First.");
return false;
} else {
var out = true;
$('input[type=checkbox]').each(function () {
if ($(this).is(":checked")) {
product_name = $(this).parent().siblings('td#product_name').text();
if (!$(this).parent().siblings('td').find('input[type=number]').val()) {
alert("Choose Quantity for Product " + product_name );
out = false;
return false;
}
if (!$(this).parent().siblings('td').find('input[type=text]').val()) {
alert("Choose Unit Price for Product " + product_name);
out = false;
return false;
}
if (!Number($(this).parent().siblings('td').find('input[type=text]').val())) {
alert("Unit Price must be Number for Product " + product_name);
out = false;
return false;
} else {
var cost = $(this).parent().siblings('td').find('input[id=hidden_cost_' + $(this).val() +
']').val();
if ($(this).parent().siblings('td').find('input[type=text]').val() <= parseInt(cost)) {
alert("Unit Price must be grater than " + cost + " for Product " + product_name);
out = false;
return false;
}
}
}
});
if (out == false)
return false;
}
});
my problem is if a choose a checkbox on the first form and hit submit in the second form the validation occurs in the first form and The opposite occurs in the second form