Laravel jQuery验证在不同的两个抽头上的两个表单在页面上引导

Question

我有两个抽头引导程序，每个抽头都有不同的形式，比如我如何单独验证它们。：

<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>

在javascript中jquery验证：

$('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;
}
});

我的问题是，如果在第一个表单上选中一个复选框，然后在第二个表单中点击提交，则在第一个表格中会发生验证，而在第二表单中则会发生相反的情况

Answer 1

您当前的jquery代码使用input[type=checkbox]作为选择器，因此每当调用任何表单提交事件时，它都会检查表单中不存在的所有其他复选框。避免这种情况的一种方法是使用formsid或特定选项卡的所有复选框所在的id或div作为带有复选框的选择器，即：$('#container_template_Drinks input[type=checkbox]')..。

演示代码 :

$('form#validFormCoffeeDrinks').on('submit', function(event) {
var category_id = $('#category_salesCoffeeDrinks').val();
if (category_id == 0) {
alert("Choose a Category First.");
return false;
}
//check inside container..div checkboxes
if (!$('#container_template_Drinks input[type=checkbox]').is(":checked")) {
alert("Choose a Product First.");
return false;
} else {
var out = true;
//loop only under container divs
$('#container_template_Drinks input[type=checkbox]').each(function() {
if ($(this).is(":checked")) {
console.log($(this).val())
//your other codes
}
});
if (out == false)
return false;
}
});
$('form#validFormCoffee').on('submit', function(event) {
//loop only under container divs
if (!$('#container_template_BarcodeProducts input[type=checkbox]').is(":checked")) {
alert("Choose a Product First.");
return false;
} else {
var out = true;
//loop only under container divs
$('#container_template_BarcodeProducts input[type=checkbox]').each(function() {
if ($(this).is(":checked")) {
console.log($(this).val());
//your othere code
}
});
if (out == false)
return false;
}
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Drinks">Drinks</a></li>
<li><a data-toggle="tab" href="#BarcodeProducts">BarcodeProducts</a></li>
</ul>
<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') }}">
<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">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div id="container_template_Drinks" class="col-md-10">
<input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="1">
<input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="2">
<input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="3" 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') }}">
<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">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="form-row">
<div id="container_template_BarcodeProducts" class="col-md-10">
<input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="4">
<input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="5">
<input type="checkbox" name="product_item_list[]" id="product_item_list[]" value="6">
</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>