diff --git a/lib/formfields/admin/customer/formfield.customer_add.php b/lib/formfields/admin/customer/formfield.customer_add.php
index 83c50b82..b2ff9f92 100644
--- a/lib/formfields/admin/customer/formfield.customer_add.php
+++ b/lib/formfields/admin/customer/formfield.customer_add.php
@@ -32,6 +32,7 @@ return [
 		'title' => lng('admin.customer_add'),
 		'image' => 'fa-solid fa-user-plus',
 		'self_overview' => ['section' => 'customers', 'page' => 'customers'],
+		'id' => 'customer_add',
 		'sections' => [
 			'section_a' => [
 				'title' => lng('admin.accountdata'),
@@ -108,19 +109,19 @@ return [
 						'label' => lng('customer.firstname'),
 						'desc' => lng('customer.nameorcompany_desc'),
 						'type' => 'text',
-						'mandatory_ex' => ['company']
+						'mandatory' => true
 					],
 					'name' => [
 						'label' => lng('customer.lastname'),
 						'desc' => lng('customer.nameorcompany_desc'),
 						'type' => 'text',
-						'mandatory_ex' => ['company']
+						'mandatory' => true
 					],
 					'company' => [
 						'label' => lng('customer.company'),
 						'desc' => lng('customer.nameorcompany_desc'),
 						'type' => 'text',
-						'mandatory_ex' => ['firstname', 'name']
+						'mandatory' => true
 					],
 					'street' => [
 						'label' => lng('customer.street'),
diff --git a/lib/formfields/admin/customer/formfield.customer_edit.php b/lib/formfields/admin/customer/formfield.customer_edit.php
index 65a33fa7..72d94408 100644
--- a/lib/formfields/admin/customer/formfield.customer_edit.php
+++ b/lib/formfields/admin/customer/formfield.customer_edit.php
@@ -32,6 +32,7 @@ return [
 		'title' => lng('admin.customer_edit'),
 		'image' => 'fa-solid fa-user-pen',
 		'self_overview' => ['section' => 'customers', 'page' => 'customers'],
+		'id' => 'customer_edit',
 		'sections' => [
 			'section_a' => [
 				'title' => lng('admin.accountdata'),
@@ -107,21 +108,21 @@ return [
 						'label' => lng('customer.firstname'),
 						'desc' => lng('customer.nameorcompany_desc'),
 						'type' => 'text',
-						'mandatory_ex' => ['company'],
+						'mandatory' => true,
 						'value' => $result['firstname']
 					],
 					'name' => [
 						'label' => lng('customer.lastname'),
 						'desc' => lng('customer.nameorcompany_desc'),
 						'type' => 'text',
-						'mandatory_ex' => ['company'],
+						'mandatory' => true,
 						'value' => $result['name']
 					],
 					'company' => [
 						'label' => lng('customer.company'),
 						'desc' => lng('customer.nameorcompany_desc'),
 						'type' => 'text',
-						'mandatory_ex' => ['firstname', 'name'],
+						'mandatory' => true,
 						'value' => $result['company']
 					],
 					'street' => [
diff --git a/lng/de.lng.php b/lng/de.lng.php
index 4fe88878..468e1b5c 100644
--- a/lng/de.lng.php
+++ b/lng/de.lng.php
@@ -815,6 +815,7 @@ return [
 		'vmailquotawrong' => 'Die Kontingent-Größe muss positiv sein.',
 		'allocatetoomuchquota' => 'Sie versuchen "%s" MB Kontingent zu zuweisen, haben aber nicht genug übrig.',
 		'missingfields' => 'Es wurden nicht alle Felder augefüllt.',
+		'requiredfield' => 'Dieses Feld ist ein Pflichtfeld.',
 		'accountnotexisting' => 'Der angegebene E-Mail-Account existiert nicht.',
 		'nopermissionsorinvalidid' => 'Entweder fehlen Ihnen die nötigen Rechte diese Einstellung zu ändern oder es wurde eine ungültige ID übergeben',
 		'phpsettingidwrong' => 'Eine PHP-Konfiguration mit dieser ID existiert nicht',
diff --git a/lng/en.lng.php b/lng/en.lng.php
index 914a7934..952e6177 100644
--- a/lng/en.lng.php
+++ b/lng/en.lng.php
@@ -882,6 +882,7 @@ return [
 		'vmailquotawrong' => 'The quotasize must be positive number.',
 		'allocatetoomuchquota' => 'You tried to allocate %s MB Quota, but you do not have enough left.',
 		'missingfields' => 'Not all required fields were filled out.',
+		'requiredfield' => 'This field is required.',
 		'accountnotexisting' => 'The given email account doesn\'t exist.',
 		'nopermissionsorinvalidid' => 'You don\'t have enough permissions to change these settings or an invalid id was given.',
 		'phpsettingidwrong' => 'A PHP Configuration with this id doesn\'t exist',
diff --git a/package-lock.json b/package-lock.json
index 1308c973..31876746 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
 				"bootstrap": "^5.2.1",
 				"chart.js": "^3.9.1",
 				"jquery": "^3.6.1",
+				"jquery-validation": "^1.19.5",
 				"laravel-mix": "^6.0.42",
 				"resolve-url-loader": "^5.0.0",
 				"sass": "^1.49.7",
@@ -5396,6 +5397,15 @@
 			"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==",
 			"dev": true
 		},
+		"node_modules/jquery-validation": {
+			"version": "1.19.5",
+			"resolved": "https://registry.npmjs.org/jquery-validation/-/jquery-validation-1.19.5.tgz",
+			"integrity": "sha512-X2SmnPq1mRiDecVYL8edWx+yTBZDyC8ohWXFhXdtqFHgU9Wd4KHkvcbCoIZ0JaSaumzS8s2gXSkP8F7ivg/8ZQ==",
+			"dev": true,
+			"peerDependencies": {
+				"jquery": "^1.7 || ^2.0 || ^3.1"
+			}
+		},
 		"node_modules/js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -13123,6 +13133,13 @@
 			"integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw==",
 			"dev": true
 		},
+		"jquery-validation": {
+			"version": "1.19.5",
+			"resolved": "https://registry.npmjs.org/jquery-validation/-/jquery-validation-1.19.5.tgz",
+			"integrity": "sha512-X2SmnPq1mRiDecVYL8edWx+yTBZDyC8ohWXFhXdtqFHgU9Wd4KHkvcbCoIZ0JaSaumzS8s2gXSkP8F7ivg/8ZQ==",
+			"dev": true,
+			"requires": {}
+		},
 		"js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/package.json b/package.json
index d3027a8c..45977562 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
 		"bootstrap": "^5.2.1",
 		"chart.js": "^3.9.1",
 		"jquery": "^3.6.1",
+		"jquery-validation": "^1.19.5",
 		"laravel-mix": "^6.0.42",
 		"resolve-url-loader": "^5.0.0",
 		"sass": "^1.49.7",
diff --git a/templates/Froxlor/form/form.html.twig b/templates/Froxlor/form/form.html.twig
index 381ce161..a149da8f 100644
--- a/templates/Froxlor/form/form.html.twig
+++ b/templates/Froxlor/form/form.html.twig
@@ -2,7 +2,7 @@
 
 	{% import "Froxlor/form/formfields.html.twig" as formfields %}
 
-	<form action="{{ formaction|default("") }}" method="post" enctype="multipart/form-data" class="form">
+	<form action="{{ formaction|default("") }}" {% if form_data.id is defined %}id="{{ form_data.id }}"{% endif %} method="post" enctype="multipart/form-data" class="form">
 		{% for sid,section in form_data.sections %}
 			{% if section.visible is not defined or (section.visible is defined and section.visible == true) %}
 			<div class="card mb-3" id="{{ idprefix }}{{ sid }}">
@@ -48,4 +48,9 @@
 		{% endif %}
 		<span class="text-danger">*</span> {{ lng('panel.mandatoryfield') }}
 	</form>
+
+	{# add translation for custom validations #}
+	{% if form_data.id is defined and form_data.id in ['customer_add', 'customer_edit'] %}
+		<script>$(function() { $.extend($.validator.messages, {required: "{{ lng('error.requiredfield') }}"}) });</script>
+	{% endif %}
 {% endmacro %}
diff --git a/templates/Froxlor/form/formfields.html.twig b/templates/Froxlor/form/formfields.html.twig
index d8e76e79..2c793f68 100644
--- a/templates/Froxlor/form/formfields.html.twig
+++ b/templates/Froxlor/form/formfields.html.twig
@@ -73,28 +73,6 @@
 					<small class="text-info">{{ field.note|raw }}</small>
 				{% endif %}
 
-				{% if field.mandatory_ex is not empty and field.mandatory_ex is iterable and field.mandatory_ex|length > 0 %}
-					<script>
-						$(function () {
-							$('#{{ id }}').attr('required', true);
-							$('#{{ id }}').trigger('change');
-							$('#{{ id }}').on('change', function(e) {
-								if ($(this).val().length > 0) {
-									{% for mex in field.mandatory_ex %}
-									$('#{{ mex }}').attr('required', false);
-									{% endfor %}
-									$('#{{ id }}').attr('required', true);
-								} else {
-									{% for mex in field.mandatory_ex %}
-									$('#{{ mex }}').attr('required', true);
-									{% endfor %}
-									$('#{{ id }}').attr('required', false);
-								}
-							});
-						});
-					</script>
-				{% endif %}
-
 				{% if norow == false and (field.type != 'hidden' or (field.type == 'hidden' and field.display is defined and field.display is not empty)) %}
 				</div>
 			</div>
diff --git a/templates/Froxlor/src/js/components/validation.js b/templates/Froxlor/src/js/components/validation.js
new file mode 100644
index 00000000..ef34b3e9
--- /dev/null
+++ b/templates/Froxlor/src/js/components/validation.js
@@ -0,0 +1,24 @@
+$(document).ready(function() {
+	$('#customer_add,#customer_edit').each(function(){
+		$(this).validate({
+			rules:{
+				'name':{
+					required:function(){
+						return $('#company').val().length === 0 || $('#firstname').val().length > 0;
+					}
+				},
+				'firstname':{
+					required:function(){
+						return $('#company').val().length === 0 || $('#name').val().length > 0;
+					}
+				},
+				'company':{
+					required:function(){
+						return $('#name').val().length === 0
+							&& $('#firstname').val().length === 0;
+					}
+				}
+			},
+		});
+	});
+});
diff --git a/templates/Froxlor/src/js/main.js b/templates/Froxlor/src/js/main.js
index 566fc1d8..b31f3f8e 100644
--- a/templates/Froxlor/src/js/main.js
+++ b/templates/Froxlor/src/js/main.js
@@ -5,6 +5,7 @@ import Chart from 'chart.js/auto';
 
 // set jquery & bootstrap & chart
 global.$ = require('jquery');
+global.validation = require('jquery-validation');
 global.bootstrap = require('bootstrap');
 window.Chart = Chart;
 
@@ -27,16 +28,17 @@ $(function () {
 });
 
 // Load components
-require('./components/global')
-require('./components/search')
-require('./components/newsfeed')
-require('./components/updatecheck')
-require('./components/customer')
-require('./components/tablecolumns')
-require('./components/ipsandports')
-require('./components/domains')
-require('./components/configfiles')
 require('./components/apikeys')
-require('./components/install')
+require('./components/configfiles')
+require('./components/customer')
 require('./components/dnseditor')
+require('./components/domains')
+require('./components/global')
+require('./components/install')
+require('./components/ipsandports')
+require('./components/newsfeed')
+require('./components/search')
+require('./components/tablecolumns')
 require('./components/traffic')
+require('./components/updatecheck')
+require('./components/validation')