429 lines
22 KiB
PHP
429 lines
22 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VET Repository - Publikationsvertrag</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.hrbibb {
|
|
border-top: 2px solid #007bff;
|
|
margin: 20px 0;
|
|
}
|
|
.validation-message {
|
|
color: #dc3545;
|
|
font-size: 0.875em;
|
|
margin-top: 10px;
|
|
display: none;
|
|
}
|
|
.submit-section {
|
|
background-color: #f8f9fa;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
margin-top: 30px;
|
|
}
|
|
.invalid-field {
|
|
border-color: #dc3545 !important;
|
|
box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<h2>VET Repository - Publikationsvertrag</h2>
|
|
|
|
<form id="mainForm" novalidate>
|
|
|
|
<!-- Erstveröffentlichung Open Access -->
|
|
<div id="divErstveroeffentlichungOpenAccess" class="ms-3">
|
|
<div class="pt-3"></div>
|
|
<hr class="hrbibb">
|
|
<h5>Erstveröffentlichung Open Access</h5>
|
|
|
|
<div class="container-fluid">
|
|
<div class="col-12">
|
|
<div class="row pt-3">
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input required-field"
|
|
type="checkbox"
|
|
id="checkBoxBestaetigungCCBY"
|
|
name="checkBoxBestaetigungCCBY"
|
|
aria-labelledby="checkBoxBestaetigungCCBYLabel">
|
|
<label class="form-check-label fw-bold"
|
|
id="checkBoxBestaetigungCCBYLabel"
|
|
for="checkBoxBestaetigungCCBY">
|
|
</label>
|
|
Ich bestätige, dass ich die <a href="https://www.bibb.de/dokumente/pdf/Publikationsvertrag_CC_BY-SA.pdf" target='_blank' rel='noopener noreferrer'><span class="fw-bold">Vertragsbedingungen </span></a>verstanden habe und diesen zustimme.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input required-field"
|
|
type="checkbox"
|
|
id="checkCCBYSA"
|
|
name="checkCCBYSA"
|
|
aria-labelledby="ccbysaLabel">
|
|
<label class="form-check-label fw-bold"
|
|
id="ccbysaLabel"
|
|
for="checkCCBYSA">
|
|
CC BY-SA-Lizenz:
|
|
</label>
|
|
Ich möchte die Publikation unter der CC BY-SA-Lizenz veröffentlichen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zweitveröffentlichung Open Access -->
|
|
<div id="divZweitveroeffentlichungOpenAccess" class="ms-3">
|
|
<div class="pt-3"></div>
|
|
<hr class="hrbibb">
|
|
<h5>Zweitveröffentlichung Open Access</h5>
|
|
|
|
<div class="container-fluid">
|
|
<div class="col-12">
|
|
<div class="row pt-3">
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input required-field"
|
|
type="checkbox"
|
|
id="checkBoxBestaetigungCCBYV3"
|
|
name="checkBoxBestaetigungCCBYV3"
|
|
aria-labelledby="checkBoxBestaetigungCCBYV3Label">
|
|
<label class="form-check-label fw-bold"
|
|
id="checkBoxBestaetigungCCBYV3Label"
|
|
for="checkBoxBestaetigungCCBYV3">
|
|
</label>
|
|
Ich bestätige, dass ich die Publikation im VET Repository zweitveröffentlichen möchte.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="fw-bold">Wählen Sie die bereits verwendete CC-Lizenz:</p>
|
|
<div class="license-group">
|
|
<div class="form-check">
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="OAlicenseType"
|
|
id="OpenAccessCCBY"
|
|
value="CC BY">
|
|
<label class="form-check-label" for="OpenAccessCCBY">
|
|
<a href="http://creativecommons.org/licenses/by/4.0" target='_blank'>CC BY 4.0 (Namensnennung)</a>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="OAlicenseType"
|
|
id="OpenAccessCCBYSA"
|
|
value="CC BY-SA">
|
|
<label class="form-check-label" for="OpenAccessCCBYSA">
|
|
<a href="http://creativecommons.org/licenses/by-sa/4.0" target='_blank'>CC BY-SA 4.0 (Namensnennung, Weitergabe unter gleichen Bedingungen)</a>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="OAlicenseType"
|
|
id="OpenAccessCCBYND"
|
|
value="CC BY-ND">
|
|
<label class="form-check-label" for="OpenAccessCCBYND">
|
|
<a href="http://creativecommons.org/licenses/by-nd/4.0" target='_blank'>CC BY-ND 4.0 (Namensnennung, keine Bearbeitung)</a>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="OAlicenseType"
|
|
id="OpenAccessCCBYNC"
|
|
value="CC BY-NC">
|
|
<label class="form-check-label" for="OpenAccessCCBYNC">
|
|
<a href="http://creativecommons.org/licenses/by-nc/4.0" target='_blank'>CC BY-NC 4.0 (Namensnennung, keine kommerzielle Nutzung)</a>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="OAlicenseType"
|
|
id="OpenAccessCCBYNCND"
|
|
value="CC BY-NC-ND">
|
|
<label class="form-check-label" for="OpenAccessCCBYNCND">
|
|
<a href="http://creativecommons.org/licenses/by-nc-nd/4.0" target='_blank'>CC BY-NC-ND 4.0 (Namensnennung, keine kommerzielle Nutzung, keine Bearbeitung)</a>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input"
|
|
type="radio"
|
|
name="OAlicenseType"
|
|
id="OpenAccessCCBYNCSA"
|
|
value="CC BY-NC-SA">
|
|
<label class="form-check-label" for="OpenAccessCCBYNCSA">
|
|
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0" target='_blank'>CC BY-NC-SA 4.0 (Namensnennung, keine kommerzielle Nutzung, Weitergabe unter gleichen Bedingungen)</a>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Allgemeine Bedingungen -->
|
|
<div id="divCommon" class="ms-3">
|
|
<div class="pt-3"></div>
|
|
<hr class="hrbibb">
|
|
<h5>Allgemeine Bedingungen</h5>
|
|
|
|
<div class="container-fluid">
|
|
<div class="col-12">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input required-field"
|
|
type="checkbox"
|
|
id="checkBoxBerechtigung"
|
|
name="checkBoxBerechtigung">
|
|
<label class="form-check-label fw-bold" for="checkBoxBerechtigung">
|
|
Berechtigung:
|
|
</label>
|
|
Ich erkläre, dass ich selbst Autor/-in der Publikation bin bzw. als Mitglied eines Autorenteams auch im Namen meiner Mitautoren die Publikation zur Veröffentlichung einreichen darf.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input required-field"
|
|
type="checkbox"
|
|
id="checkBoxBildrechte"
|
|
name="checkBoxBildrechte">
|
|
<label class="form-check-label fw-bold" for="checkBoxBildrechte">
|
|
Bildrechte:
|
|
</label>
|
|
Ich bestätige, dass die Rechte für eventuell enthaltene Bilder und Tabellen auch für die Zurverfügungstellung gelten.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input required-field"
|
|
type="checkbox"
|
|
id="checkBoxHaftung"
|
|
name="checkBoxHaftung">
|
|
<label class="form-check-label fw-bold" for="checkBoxHaftung">
|
|
Haftung/Mitteilungspflicht:
|
|
</label>
|
|
Ich versichere, dass ich zur Veröffentlichung berechtigt bin und keine Rechte Dritter verletzt werden.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="form-check">
|
|
<input class="form-check-input required-field"
|
|
type="checkbox"
|
|
id="checkBoxDatenschutz"
|
|
name="checkBoxDatenschutz">
|
|
<label class="form-check-label fw-bold" for="checkBoxDatenschutz">
|
|
Datenschutz:
|
|
</label>
|
|
Ich willige ein, dass meine Daten für die Veröffentlichung verarbeitet werden dürfen.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zusätzliche Felder -->
|
|
<div id="erstVeroeffentlichtSection" class="ms-3">
|
|
<div class="pt-3"></div>
|
|
<hr class="hrbibb">
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<h5>Erstveröffentlicht</h5>
|
|
</div>
|
|
<div class="col-8">
|
|
<textarea rows="2"
|
|
id="erstVeroeffentlichtInput"
|
|
class="form-control"
|
|
placeholder="Bitte geben Sie den Link zum Erstveröffentlichungsort an."
|
|
aria-label="erstVeroeffentlicht"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mitteilungSection" class="ms-3">
|
|
<div class="row">
|
|
<div class="col-3">
|
|
<h5>Mitteilung</h5>
|
|
</div>
|
|
<div class="col-8">
|
|
<textarea rows="2"
|
|
id="mitteilungInput"
|
|
class="form-control"
|
|
placeholder="Möchten Sie uns noch etwas mitteilen?"
|
|
aria-label="mitteilung"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Section -->
|
|
<div class="submit-section">
|
|
<div class="validation-message" id="validationMessage">
|
|
<strong>Bitte füllen Sie alle erforderlichen Felder aus:</strong>
|
|
<ul id="missingFields"></ul>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<small class="text-muted">* Alle markierten Felder sind Pflichtfelder</small>
|
|
</div>
|
|
<div>
|
|
<button type="button" id="validateButton" class="btn btn-secondary me-2">Formular prüfen</button>
|
|
<button type="submit" id="submitButton" class="btn btn-primary" disabled>Absenden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('mainForm');
|
|
const submitButton = document.getElementById('submitButton');
|
|
const validateButton = document.getElementById('validateButton');
|
|
const validationMessage = document.getElementById('validationMessage');
|
|
const missingFieldsList = document.getElementById('missingFields');
|
|
|
|
// Definiere erforderliche Felder
|
|
const requiredCheckboxes = [
|
|
'checkBoxBestaetigungCCBY',
|
|
'checkCCBYSA',
|
|
'checkBoxBestaetigungCCBYV3',
|
|
'checkBoxBerechtigung',
|
|
'checkBoxBildrechte',
|
|
'checkBoxHaftung',
|
|
'checkBoxDatenschutz'
|
|
];
|
|
|
|
const requiredRadioGroups = [
|
|
'OAlicenseType'
|
|
];
|
|
|
|
// Validierungsfunktion
|
|
function validateForm() {
|
|
let isValid = true;
|
|
let missingFields = [];
|
|
|
|
// Entferne vorherige Hervorhebungen
|
|
document.querySelectorAll('.invalid-field').forEach(field => {
|
|
field.classList.remove('invalid-field');
|
|
});
|
|
|
|
// Prüfe erforderliche Checkboxen
|
|
requiredCheckboxes.forEach(checkboxId => {
|
|
const checkbox = document.getElementById(checkboxId);
|
|
if (checkbox && !checkbox.checked) {
|
|
isValid = false;
|
|
checkbox.classList.add('invalid-field');
|
|
const label = document.querySelector(`label[for="${checkboxId}"]`);
|
|
const fieldName = label ? label.textContent.trim() : checkboxId;
|
|
missingFields.push(fieldName);
|
|
}
|
|
});
|
|
|
|
// Prüfe erforderliche Radio-Button-Gruppen
|
|
requiredRadioGroups.forEach(groupName => {
|
|
const radios = document.querySelectorAll(`input[name="${groupName}"]`);
|
|
const isGroupSelected = Array.from(radios).some(radio => radio.checked);
|
|
|
|
if (!isGroupSelected) {
|
|
isValid = false;
|
|
radios.forEach(radio => radio.classList.add('invalid-field'));
|
|
missingFields.push('CC-Lizenz Auswahl');
|
|
}
|
|
});
|
|
|
|
// Aktualisiere UI basierend auf Validierungsergebnis
|
|
if (isValid) {
|
|
validationMessage.style.display = 'none';
|
|
submitButton.disabled = false;
|
|
submitButton.textContent = 'Absenden';
|
|
} else {
|
|
// Zeige Fehlermeldung
|
|
missingFieldsList.innerHTML = '';
|
|
missingFields.forEach(field => {
|
|
const li = document.createElement('li');
|
|
li.textContent = field;
|
|
missingFieldsList.appendChild(li);
|
|
});
|
|
validationMessage.style.display = 'block';
|
|
submitButton.disabled = true;
|
|
}
|
|
|
|
return isValid;
|
|
}
|
|
|
|
// Event Listeners für Live-Validierung
|
|
document.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(input => {
|
|
input.addEventListener('change', validateForm);
|
|
});
|
|
|
|
// Validate Button Event
|
|
validateButton.addEventListener('click', function() {
|
|
const isValid = validateForm();
|
|
if (isValid) {
|
|
alert('✅ Alle erforderlichen Felder sind ausgefüllt. Sie können das Formular jetzt absenden.');
|
|
} else {
|
|
// Scroll zu der ersten fehlenden Validierungsmeldung
|
|
validationMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
});
|
|
|
|
// Form Submit Event
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
if (validateForm()) {
|
|
// Hier würdest du normalerweise die Daten an den Server senden
|
|
alert('✅ Formular erfolgreich abgesendet!');
|
|
console.log('Formulardaten:', new FormData(form));
|
|
} else {
|
|
alert('❌ Bitte füllen Sie alle erforderlichen Felder aus.');
|
|
}
|
|
});
|
|
|
|
// Verhindere das Verlassen der Seite bei unvollständigem Formular
|
|
window.addEventListener('beforeunload', function(e) {
|
|
if (!validateForm()) {
|
|
e.preventDefault();
|
|
e.returnValue = 'Sie haben noch nicht alle erforderlichen Felder ausgefüllt. Möchten Sie die Seite wirklich verlassen?';
|
|
return e.returnValue;
|
|
}
|
|
});
|
|
|
|
// Initiale Validierung
|
|
validateForm();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|