Added js validation to Order Form

Layout/default/Order/Form.php

@@ -25,7 +25,7 @@
           <div class="card-body">
             <h4 class="header-title mb-2"><?=($order->id) ? "Bestellung bearbeiten" : "Neue Bestellung"?></h4>
             
-            <form class="form-horizontal" method="post" action="<?=self::getUrl("Order", "save")?>" enctype="multipart/form-data">
+            <form class="form-horizontal" method="post" action="<?=self::getUrl("Order", "save")?>" name="orderForm" id="orderForm" enctype="multipart/form-data">
               <div class="card">
                 <div class="card-body">
                   
@@ -317,6 +317,7 @@
                     <label class="col-lg-2 col-form-label" for="bank_account_iban">IBAN</label>
                     <div class="col-lg-10">
                       <input type="text" class="form-control" name="bank_account_iban" id="bank_account_iban" value="<?=$order->bank_account_iban?>" />
+                      <small id="iban_error" class="hidden">IBAN ungültig!</small>
                     </div>
                   </div>
                   
@@ -607,6 +608,7 @@
                 <label class="col-lg-2"></label>
                 <div class="col-lg-10">
                   <button type="submit" class="btn btn-primary">Speichern</button>
+                  <span id="form-error" class="text-danger hidden">Bitte alle benötigten Felder ausfüllen!</span>
                 </div>
               </div>
               
@@ -721,9 +723,171 @@
     },
     'json');
     
-    
-    
   }
+  
+  /*********************
+  * Form validation
+  */
+
+  // iban validation
+  function validateIban(iban) {
+    if(!iban) {
+      return false;
+    }
+    iban = iban.toUpperCase().replace(/\s+/, '');
+    //check format
+    var m;
+    
+    if(!iban.match(/^[A-Z]{2}[0-9]{2}[A-Z0-9]{1,30}$/)) {
+      return false;
+    }
+    
+    var cc = iban.substr(0, 2);
+    var check = parseInt(iban.substr(2, 2));
+    var account = iban.substr(4);
+
+    var searchRange = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');
+    //var replaceRange = [];
+    var checkStr = account + cc + "00";
+    for(var i = 0; i <= 25; i++) {
+      checkStr = checkStr.replace(searchRange[i], i + 10);
+    };
+    // make checksum
+    var checksum = parseInt(checkStr.substr(0,1));
+    for(pos = 1; pos < checkStr.length; pos++) {
+      checksum *= 10;
+      checksum += parseInt(checkStr.substr(pos, 1));
+      checksum %= 97;
+    }
+    
+    if(98 - checksum == check) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  
+  
+  
+  function validateOrderForm() {
+    var allFields = [
+      "owner_id", "owner_company", "owner_firstname", "owner_lastname", "owner_street", "owner_zip", "owner_city", "owner_country", "owner_phone", "owner_email",
+      "billingaddress_id", "billing_company", "billing_firstname", "billing_lastname", "billing_street", "billing_zip", "billing_city", "billing_country", "billing_phone", "billing_email",
+      "order_date", "finish_after", "finish_after_comment", "billing_type", "bank_account_bank", "bank_account_owner", "bank_account_iban", "bank_account_bic"
+    ];
+    var checkEmpty = [];
+    var error = false;
+
+    // remove invalid class
+    allFields.forEach(function(field) {
+      //console.log("remove invalid " + field);
+      $("#" + field).removeClass("invalid");
+    });
+    $("#form-error").hide();
+    $("#iban_error").hide();
+    $('#owner_id').next().find('.select2-selection').removeClass('invalid');
+    $('#billingaddress_id').next().find('.select2-selection').removeClass('invalid');
+    
+    checkEmpty.push("order_date");
+    if($('#finish_after').val()) {
+      checkEmpty.push("finish_after_comment");
+    }
+
+    if($('#owner_id').val() == "new") {
+      if(!$('#owner_company').val()) {
+        //console.log("no owner_company");
+        if(!$('#owner_firstname').val() || !$('#owner_lastname').val()) {
+          $('#owner_company').addClass("invalid");
+          $('#owner_firstname').addClass("invalid");
+          $('#owner_lastname').addClass("invalid");
+          error = true;
+        }
+      }
+      checkEmpty.push("owner_street");
+      checkEmpty.push("owner_zip");
+      checkEmpty.push("owner_city");
+      //checkEmpty.push("owner_country");
+      checkEmpty.push("owner_phone");
+      checkEmpty.push("owner_email");
+    }
+    
+    if(!$('#owner_id :selected').val()) {
+      $('#owner_id').addClass("invalid");
+      $('#owner_id').next().find('.select2-selection').addClass('invalid');
+      error = true;
+    }
+    
+    if($('#billingaddress_id').val() == "new") {
+      if(!$('#billing_company').val()) {
+        //console.log("no billing_company");
+        if(!$('#billing_firstname').val() || !$('#billing_lastname').val()) {
+          $('#billing_company').addClass("invalid");
+          $('#billing_firstname').addClass("invalid");
+          $('#billing_lastname').addClass("invalid");
+          error = true;
+        }
+      }
+      checkEmpty.push("billing_street");
+      checkEmpty.push("billing_zip");
+      checkEmpty.push("billing_city");
+      //checkEmpty.push("billing_country");
+      checkEmpty.push("billing_phone");
+      checkEmpty.push("billing_email");
+    }
+    if(!$('#billingaddress_id :selected').val()) {
+      $('#billingaddress_id').addClass("invalid");
+      $('#billingaddress_id').next().find('.select2-selection').addClass('invalid');
+      error = true;
+    }
+
+    // check bankdaten
+    if($('#billing_type').val() == "sepa") {
+      checkEmpty.push("bank_account_bank");
+      checkEmpty.push("bank_account_owner");
+      checkEmpty.push("bank_account_bic");
+
+      if(!validateIban($("#bank_account_iban").val())) {
+        $("#bank_account_iban").addClass("invalid");
+        $("#iban_error").show();
+        error = true;
+      }
+    }
+    
+    if(checkEmpty.length) {
+      checkEmpty.forEach(function(field) {
+        if(!$("#" + field).val().length) {
+          console(field + " empty");
+          $("#" + field).addClass("invalid");
+          error = true;
+        }
+      });
+    }
+    
+    if($('#owner_id').hasClass("invalid")) {
+      $('#owner_id').next().find('.select2-selection').addClass('invalid');
+    }
+    
+    if(error) {
+      $("#form-error").show();
+    }
+    
+    console.log("empty: " + checkEmpty);
+    return true;
+   }
+
+  
+   
+  $(document).ready(function() {
+    $('#orderForm').submit(function(e) {
+       console.log("submit");
+       if(!validateOrderForm()) {
+         console.log("nope");
+         e.preventDefault();
+         return false;
+       }
+       return true;
+     });
+   });
 
 </script>