Add validation

assets/js/app.js

@@ -28,6 +28,7 @@ var units = window.units = {
 
 
 window.stepper = {
+    errors: {},
     parts: {
         notar: 0.02,
         grundsteuer: 0.065,
@@ -48,6 +49,7 @@ window.stepper = {
         { value: 'dr', label: 'Dr' },
     ],
     value: {
+        datenschutz: false,
         kind: null,
         kauf: {
             kaufpreis: 300000,
@@ -79,12 +81,14 @@ window.stepper = {
         email: '',
         job: '',
         haushalt: '',
-        einnahme: ''
+        einnahme: '',
+        energetisch: false,
+        modernisierung: false,
     },
     kinds: [
-        {label: 'Kauf einer Immobilie', value: 'kauf', icon: 'home'},
-        {label: 'Eigenes Bauvorhaben', value: 'bau', icon: 'home'},
-        {label: 'Anschlussfinanzierung', value: 'anschluss', icon: 'home'}
+        {label: 'Kauf einer Immobilie', value: 'kauf', icon: 'immobilienfinanzierung'},
+        {label: 'Eigenes Bauvorhaben', value: 'bau', icon: 'bauvorhaben'},
+        {label: 'Anschlussfinanzierung', value: 'anschluss', icon: 'anschlussfinanzierung'}
     ],
 
     /* Methods */
@@ -96,10 +100,20 @@ window.stepper = {
         axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
             ...this.value
         }).then(ret => {
-            this.slideTo(null, this.step+1);
+            if (ret.data !== undefined && ret.data.errors !== undefined) {
+                this.errors = ret.data.errors;
+            } else {
+                this.errors = {};
+                this.slideTo(null, this.step+1);
+                console.log('Anfrage versendet');
+            }
         });
     },
 
+    error(field) {
+        return this.errors[field] === undefined ? '' : this.errors[field];
+    },
+
     slideTo(e, index) {
         if (e !== null) {
             e.preventDefault();

src/Stepper.php

@@ -2,8 +2,8 @@
 
 namespace Zoomyboy\Stepper;
 
-use Twig\Loader\FilesystemLoader;
 use Twig\Environment;
+use Twig\Loader\FilesystemLoader;
 use Twig\TwigFilter as Filter;
 use Twig\TwigFunction as Func;
 
@@ -27,11 +27,14 @@ class Stepper {
         }));
     }
 
-    public function init() {
+    public function initFrontend() {
         add_action('wp_enqueue_scripts', [ $this, 'enqueue' ]);
         add_action('wp_ajax_nopriv_stepper_submit', [ $this, 'onSubmit' ]);
         add_action('wp_ajax_stepper_submit', [ $this, 'onSubmit' ]);
-        add_shortcode('stepper', [ $this, 'handle' ]);
+
+        if (!is_admin()) {
+            add_shortcode('stepper', [ $this, 'handle' ]);
+        }
     }
 
     public function enqueue() {
@@ -40,8 +43,25 @@ class Stepper {
     }
 
     public function handle() {
+        if (array_key_exists('kind', $_GET)) {
+            $data = [
+                'kaufpreis' => $_GET['kaufpreis'],
+                'eigenk' => $_GET['eigenkapital'],
+                'kind' => $_GET['kind'],
+                'step' => 1
+            ];
+        } else {
+            $data = [
+                'kaufpreis' => 300000,
+                'eigenk' => 0,
+                'kind' => null,
+                'step' => 0
+            ];
+        }
+
         return $this->twig->render('stepper.twig.htm', [
-            'sprite' => $this->url.'assets/public/sprite.svg'
+            'sprite' => $this->url.'assets/public/sprite.svg',
+            'data' => $data,
         ]);
     }
 
@@ -60,14 +80,44 @@ class Stepper {
             onblur="console.log(\'RRRR\');"';
     }
 
+    public function validate($payload) {
+        $errors = [];
+
+        if (!$payload['datenschutz']) {
+            $errors['datenschutz'] = 'Bitte akzeptieren Sie die Datenschutzerklärung.';
+        }
+
+        if (!$payload['firstname']) {
+            $errors['firstname'] = 'Bitte füllen Sie dieses Feld aus.';
+        }
+        if (!$payload['lastname']) {
+            $errors['lastname'] = 'Bitte füllen Sie dieses Feld aus.';
+        }
+        if (!$payload['phone']) {
+            $errors['phone'] = 'Bitte füllen Sie dieses Feld aus.';
+        }
+        if (!$payload['email']) {
+            $errors['email'] = 'Bitte füllen Sie dieses Feld aus.';
+        }
+        if ($payload['email'] && !filter_var($payload['email'], FILTER_VALIDATE_EMAIL)) {
+            $errors['email'] = 'Dies ist keine richtige E-Mail-Adresse';
+        }
+
+        return $errors;
+    }
+
     public function onSubmit() {
         $payload = json_decode(file_get_contents('php://input'), true);
 
+        $errors = $this->validate($payload);
+        if (count($errors)) {
+            echo json_encode(['errors' => $errors]);
+            die();
+        }
+
         wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', $payload, true), [
-            'From' => 'philipp@zoomyboy.de'
         ]);
         wp_mail($payload['email'], 'Vielen Dank für Ihre Finanzierungs-Anfrage', $this->twig->render('client.twig.htm', $payload, true), [
-            'From' => 'philipp@zoomyboy.de'
         ]);
 
         die();

stepper.php

@@ -20,6 +20,6 @@ use Zoomyboy\Stepper\Stepper;
 if (!is_admin()) {
     $stepper = new Stepper();
     $stepper->url = plugin_dir_url(__FILE__);
-    $stepper->init();
+    $stepper->initFrontend();
 }