Add warnings to enter required fields

3 files changed, 89 insertions, 36 deletions

diff --git a/index.html b/index.html
index cc93f0b..f56fdb7 100644
--- a/index.html
+++ b/index.html
@@ -123,6 +123,9 @@
             <li><input id="abmahnender_ort" type="text" name="ort" placeholder="ort"/></li>
             <li><input id="abmahnender_fax" type="text" name="fax" placeholder="fax"/></li>
           </ul>
+          <div id="step2-missing" class="hidden">
+            Wir benötigen mindestens die Adresse der abmahnenden Kanzlei.
+          </div>
           <div class="one-button">
             <div class="button button-green" onclick="step_2_done()">Weiter</div>
           </div>
@@ -134,10 +137,7 @@
         </div>
         <div class="juice">
           <p>Der Abmahner hat Ihnen ein Aktenzeichen zugeordnet. Dies muss im Schreiben auftauchen, damit die Kanzlei Ihre Antwort der Abmahnung zuordnen zu kann.</p>
-          <ul>
-            <li><input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(akten)-zeichen"/></li>
-            <li><input id="vorgang_detail" type="text" name="detail" placeholder="beschreibung (optional)"/></li>
-          </ul>
+          <input id="vorgang_aktenzeichen" type="text" name="aktenzeichen" placeholder="(akten)-zeichen"/>
 
           <p>Datum und Uhrzeit des angeblichen Verstoßes anzugeben zeigt dem Abmahner, dass Sie sich Gedanken gemacht haben, warum Sie ausschließen können, der Täter zu sein. Bitte entnehmen Sie Datum und Uhrzeit dem Abmahnschreiben.</p>
           <select class="tag" required id="tat_datum_tag" name="tat_datum_tag">
@@ -206,6 +206,9 @@
           </select>
 
           <p class="hint">Hinweis: Die vom Abmahner angegebenen Fristen sind meist zu knapp und können ruhig ignoriert werden. Jedoch sollte Ihre Antwort nicht grundlos mehr als 14 Tage nach Eingang der Abmahnung erfolgen.</p>
+          <div id="step3-missing" class="hidden">
+            Das Aktenzeichen ist bei der Beantwortung unerlässlich.
+          </div>
           <div class="one-button">
             <div class="button button-green" onclick="step_3_done()">Weiter</div>
           </div>
diff --git a/js/abmahn.js b/js/abmahn.js
index 44f06e8..7377cea 100644
--- a/js/abmahn.js
+++ b/js/abmahn.js
@@ -38,6 +38,23 @@ function getCheck(id) {
   return document.getElementById(id).checked;
 }
 
+function ensureContent() {
+  var missing = 0;
+  for(var i = 0;i<arguments.length; i++){
+    var elem = document.getElementById(arguments[i]);
+    if(elem.value=='') {
+      elem.className='missing';
+      elem.onkeypress=function(){
+        this.className='';
+        delete elem.onkeypress;
+      }
+      ++missing;
+    } else
+      elem.className='';
+  }
+  return missing;
+}
+
 // Code is heavily inspired by
 // https://github.com/alicelieutier/smoothScroll/blob/master/smoothscroll.js
 function scrollTo(end) {
@@ -102,13 +119,23 @@ function step_1_done() {
 }
 
 function step_2_done() {
-  addClass('wrapper', 'stepdone-2');
-  head_3_click();
+  if (ensureContent('abmahnender_kanzlei', 'abmahnender_strasse', 'abmahnender_plz', 'abmahnender_ort'))
+    setClass('step2-missing', 'warnmiss');
+  else {
+    setClass('step2-missing', 'hidden');
+    addClass('wrapper', 'stepdone-2');
+    head_3_click();
+  }
 }
 
 function step_3_done() {
-  addClass('wrapper', 'stepdone-3');
-  head_4_click();
+  if (ensureContent('vorgang_aktenzeichen'))
+    setClass('step3-missing', 'warnmiss');
+  else {
+    setClass('step3-missing', 'hidden');
+    addClass('wrapper', 'stepdone-3');
+    head_4_click();
+  }
 }
 
 function step_4_done() {
diff --git a/style.css b/style.css
index 12be3e3..fd83938 100644
--- a/style.css
+++ b/style.css
@@ -119,16 +119,21 @@ input[type="text"] {
   font-size: 13pt;
   font-weight: normal;
 
-  background-color : rgba(255, 255, 255, 0.30);
+  transition: background-color 1s;
+  background-color: rgba(255, 255, 255, 0.30);
   color: white;
 }
 
+input[type="text"].missing {
+  background-color: rgba(255, 127, 127, 0.60);
+}
+
 /* Remove blue focus hint */
 input:focus {
   outline: none !important;
 }
 
-/* Style place holder text (and repeat for each browser namespace :( */
+/* Style place holder text (and repeat for each browser namespace:( */
 ::placeholder {
   color: white;
   opacity: 0.5;
@@ -179,43 +184,43 @@ select {
 }
 
 input[type=checkbox]:not(old) {
-  display   : none;
-  opacity   : 0;
+  display: none;
+  opacity: 0;
 }
 
 input[type=checkbox]:not(old) + label {
-  display      : inline-block;
-  margin-left  : 0;
-  line-height  : 1.7em;
-  text-indent  : -68px; /* Make 2nd line of label align, takes border width of tickbox into account */
-  padding-left : 68px;
+  display: inline-block;
+  margin-left: 0;
+  line-height: 1.7em;
+  text-indent: -68px; /* Make 2nd line of label align, takes border width of tickbox into account */
+  padding-left: 68px;
 }
 
 input[type=checkbox]:not(old) + label > span {
-  display          : inline-block;
-  width            : 30px;
-  height           : 30px;
-  background-color : rgba(255, 255, 255, 0.30);
-  margin           : 2px 36px 8px 2px;
-  border           : 0px solid rgba(255, 255, 255, 0.30);
-  border-radius    : 6px;
-  vertical-align   : top;
-  font-size        : 1pt;
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  background-color: rgba(255, 255, 255, 0.30);
+  margin: 2px 36px 8px 2px;
+  border: 0px solid rgba(255, 255, 255, 0.30);
+  border-radius: 6px;
+  vertical-align: top;
+  font-size: 1pt;
 }
 
 input[type=checkbox]:not(old):checked + label > span {
-  transition       : font-size 0.4s;
-  font-size   : 17pt;
+  transition: font-size 0.4s;
+  font-size: 17pt;
 }
 
 input[type=checkbox]:not(old):checked + label > span:before {
-  content     : '✓';
-  display     : inline-block;
-  width       : 28px;
-  color       : white;
-  text-align  : left;
-  font-weight : bold;
-  margin-left : 144px;
+  content: '✓';
+  display: inline-block;
+  width: 28px;
+  color: white;
+  text-align: left;
+  font-weight: bold;
+  margin-left: 144px;
 }
 
 label {
@@ -350,6 +355,24 @@ dd {
 #wrapper.moreinfo-shown .hide-moreinfo { display: inline-block; }
 #wrapper.moreinfo-shown .show-moreinfo { display: none; }
 
+.hidden {
+  overflow: hidden;
+  max-height: 0px;
+  transition: max-height, height;
+  transition-timing-function: ease;
+  transition-duration: 0.5s;
+}
+
+.warnmiss {
+  width: 95%;
+  max-height: 5em;
+  background-color: #E65946;
+  border-radius: 6px;
+  text-align: center;
+  color: white;
+  padding: 0.4em 0.6em 0.4em 0.6em;
+}
+
 /* These are the heights of the expanded sections, only shown if the
    wrapper has the appropriate class */
 
@@ -449,7 +472,7 @@ dd {
 }
 
 .button-small:hover {
-  background-color : rgba(255, 255, 255, 0.30);
+  background-color: rgba(255, 255, 255, 0.30);
   color: white;
 }