Resolve "Fragebogen Validierung wird nicht ausgeführt"

Closes #1963

Merge request studip/studip!1275

app/views/questionnaire/edit.php

@@ -57,6 +57,31 @@ foreach ($questionnaire->questions as $question) {
     <div class="editor">
         <div class="rightside" aria-live="polite" tabindex="0" ref="rightside">
             <div class="admin" v-if="activeTab === 'admin'">
+
+                <article aria-live="assertive"
+                         class="validation_notes studip">
+                    <header>
+                        <h1>
+                            <?= Icon::create('info-circle', Icon::ROLE_INFO)->asImg(17, ['class' => "text-bottom validation_notes_icon"]) ?>
+                            <?= _('Hinweise zum Ausfüllen des Formulars') ?>
+                        </h1>
+                    </header>
+                    <div class="required_note">
+                        <div aria-hidden="true">
+                            <?= _('Pflichtfelder sind mit Sternchen gekennzeichnet.') ?>
+                        </div>
+                        <div class="sr-only">
+                            <?= _('Dieses Formular enthält Pflichtfelder.') ?>
+                        </div>
+                    </div>
+                    <div v-if="validationNotice && !data.title">
+                        <?= _('Folgende Angaben müssen korrigiert werden, um das Formular abschicken zu können:') ?>
+                        <ul>
+                            <li aria-describedby="questionnaire_title"><?= _('Titel des Fragebogens') ?></li>
+                        </ul>
+                    </div>
+                </article>
+
                 <div class="formpart">
                     <label class="studiprequired" for="questionnaire_title">
                         <span class="textlabel"><?= _('Titel des Fragebogens') ?></span>

resources/assets/javascripts/lib/questionnaire.js

@@ -43,7 +43,8 @@ const Questionnaire = {
                             range_type: $(form).data('range_type'),
                             range_id: $(form).data('range_id'),
                             editInternalName: null,
-                            tempInternalName: ''
+                            tempInternalName: '',
+                            validationNotice: false
                         };
                     },
                     methods: {
@@ -58,6 +59,11 @@ const Questionnaire = {
                             this.activeTab = id;
                         },
                         submit: function () {
+                            if (!this.data.title) {
+                                this.switchTab('admin');
+                                this.validationNotice = true;
+                                return;
+                            }
                             let data = {
                                 title: this.data.title,
                                 copyable: this.data.copyable,