form finished

session_dialog.php

@@ -1,10 +1,11 @@
 <?php
 
+session_start();
 function if_needed_place_postcode_form($uri)
 {
     if (strpos($uri, "/shop") !== false || strpos($uri, "/winkel") !== false) {
         render_dialog_html();
-        add_action("wp_enqueue_scripts", "dialog_styles");
+        add_action("wp_enqueue_scripts", "modal_styles");
         add_action("wp_footer", "send_postcode_data");
         if (!has_postcode()) {
             add_action("wp_footer", "show_modal");
@@ -12,17 +13,18 @@ function if_needed_place_postcode_form($uri)
     }
 }
 
-function dialog_styles()
+function modal_styles()
 {
     wp_enqueue_style(
         "prijs-per-postcode",
-        plugins_url("/assets/postcode_dialog.css", __FILE__),
+        plugins_url("/assets/postcode_modal.css", __FILE__),
     );
 }
 
 function show_modal()
 {
     ?>
+        <h1>sdfsdfsdfsdfsdfsdfsdf</h1>
         <script>
           const postcodeModal = document.querySelector("#postcode_modal");
           postcodeModal.showModal();
@@ -33,15 +35,18 @@ function show_modal()
 function send_postcode_data()
 {
     ?>
-    <script>
+    <script type="module">
+        const postcodeModal = document.querySelector("#postcode_modal");
         const submitBtn = document.querySelector("#postcode_modal_form");
-        submitBtn.addEventListener('submit', (e) => {
+
+        submitBtn.addEventListener('submit', async (e) => {
             e.preventDefault();
             const formData = new FormData(e.target);
             const data = Object.fromEntries(formData.entries());
             const json = JSON.stringify(data);
 
-            fetch('<? echo get_rest_url(null, "postcode-modal/v1/submit"); ?>', {
+            try {
+              const resp = await fetch('<? echo get_rest_url(null, "postcode-modal/v1/submit"); ?>', {
                 method: 'POST',
                 headers: {
                   'Content-Type': 'application/json',
@@ -49,6 +54,24 @@ function send_postcode_data()
                 },
                 body: json
               });
+
+              if(!resp.ok){
+                throw new Error(`HTTP Error! status: ${resp.status}` );
+              }
+              const data = await resp.json();
+              console.log("Data returnd", data);
+
+              if (data.status === "error"){
+
+              }
+
+              if (data.status === "success"){
+                postcodeModal.close();
+              }
+            }catch(err){
+              console.error("Fetch Failed:", err);
+              throw err;
+            }
         });
     </script>
     <?php
@@ -64,12 +87,14 @@ function render_dialog_html()
                title="Voer een geldige Nederlandse postcode in (bijv. 1234AB of 1234 AB)."
                pattern="[1-9][0-9]{3} ?(?!sa|sd|ss)[a-zA-Z]{2}"
                placeholder= "1010 AA"
+               required
             />
 
             <input type="text" name="huisnummer"
                 pattern="\d+([-\s]?[a-zA-Z]+)?"
                 title="Voer een geldig huisnummer in (bijv. 1, 1A, 1-A, 1a)."
                 placeholder= "12a"
+                required
             />
             <button id="postcode_modal_submit" type="submit">verzend</button>
         <form>
@@ -91,9 +116,30 @@ function handle_postcode_modal($data)
     $nonce = $data->get_header("X-WP-Nonce");
 
     if (wp_verify_nonce($nonce, "wp_rest")) {
+        if (!verify_postcode($params["postcode"])) {
             $resp = [
-            "status" => "succes",
-            "message" => $nonce,
+                "status" => "error",
+                "message" => "postcode",
+            ];
+            echo $resp;
+            exit();
+        }
+
+        if (!verify_huisnummer($params["huisnummer"])) {
+            $resp = [
+                "status" => "error",
+                "message" => "huisnummer",
+            ];
+            echo $resp;
+            exit();
+        }
+
+        $_SESSION["postcode"] = $params["postcode"];
+        $_SESSION["huisnummer"] = $params["huisnummer"];
+
+        $resp = [
+            "status" => "success",
+            "message" => "all good",
         ];
     } else {
         $resp = [
@@ -113,15 +159,21 @@ function register_modal_api()
     ]);
 }
 
-function verifyPostcode()
+function verify_postcode($postcode)
 {
-    if (preg_match('/^[0-9]{4}\s?[A-Za-z]{2}$/', $postcode)) {
-        return true;
-    }
+    if (!preg_match('/^[0-9]{4}\s?[A-Za-z]{2}$/', $postcode) === 1) {
         return false;
+    }
+    return true;
 }
 
-function verifyHuisnummer() {}
+function verify_huisnummer($huisnummer)
+{
+    if (!preg_match('/^[0-9]{4}\s?[A-Za-z]{2}$/', $huisnummer) === 1) {
+        return false;
+    }
+    return true;
+}
 
 function check_data_at_openpostcode($oostcode, $huisnummer)
 {