Improved shopping list item form validation (closes #1226)

localization/strings.pot

@@ -2074,3 +2074,6 @@ msgstr ""
 
 msgid "Print options"
 msgstr ""
+
+msgid "A product or a note is required"
+msgstr ""

public/viewjs/shoppinglistitemform.js

@@ -167,6 +167,9 @@ Grocy.Components.ProductPicker.GetPicker().on('change', function(e)
 			}
 		);
 	}
+
+	$("#note").trigger("input");
+	$("#product_id").trigger("input");
 });
 
 Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');
@@ -235,4 +238,16 @@ if (GetUriParam("embedded") !== undefined)
 	}
 }
 
+var eitherRequiredFields = $("#product_id,#product_id_text_input,#note");
+eitherRequiredFields.on("input", function()
+{
+	eitherRequiredFields.attr("required", "");
+	if (!$(this).val().isEmpty())
+	{
+		eitherRequiredFields.not(this).removeAttr("required");
+	}
+
+	Grocy.FrontendHelpers.ValidateForm('shoppinglist-form');
+});
+
 Grocy.Components.UserfieldsForm.Load();

views/components/productpicker.blade.php

@@ -11,6 +11,7 @@
 @php if(!isset($disabled)) { $disabled = false; } @endphp
 @php if(empty($hint)) { $hint = ''; } @endphp
 @php if(empty($nextInputSelector)) { $nextInputSelector = ''; } @endphp
+@php if(empty($validationMessage)) { $validationMessage = 'You have to select a product'; } @endphp
 
 <div class="form-group"
 	data-next-input-selector="{{ $nextInputSelector }}"
@@ -57,7 +58,7 @@
 			value="{{ $product->id }}">{{ $product->name }}</option>
 		@endforeach
 	</select>
-	<div class="invalid-feedback">{{ $__t('You have to select a product') }}</div>
+	<div class="invalid-feedback">{{ $__t($validationMessage) }}</div>
 	<div id="custom-productpicker-error"
 		class="form-text text-danger d-none"></div>
 	<div id="flow-info-InplaceAddBarcodeToExistingProduct"

views/shoppinglistitemform.blade.php

@@ -62,8 +62,9 @@
 				@include('components.productpicker', array(
 				'products' => $products,
 				'nextInputSelector' => '#amount',
-				'isRequired' => false,
-				'prefillById' => $productId
+				'isRequired' => true,
+				'prefillById' => $productId,
+				'validationMessage' => 'A product or a note is required'
 				))
 			</div>
 
@@ -79,9 +80,11 @@
 			<div class="form-group">
 				<label for="note">{{ $__t('Note') }}</label>
 				<textarea class="form-control"
+					required
 					rows="10"
 					id="note"
 					name="note">@if($mode == 'edit'){{ $listItem->note }}@endif</textarea>
+				<div class="invalid-feedback">{{ $__t('A product or a note is required') }}</div>
 			</div>
 
 			@include('components.userfieldsform', array(