Save

templates/shop-basket/address-form.php

@@ -70,7 +70,21 @@
       </div>
     </div>
     <div class="form-group">
-      <input type="text" id="phone" name="phone" class="form-control" required placeholder="<?= ucfirst( \S::lang( 'telefon' ) );?>" value="<?= htmlspecialchars( $address_current['phone'] );?>">
+      <div class="form-control form-control-phone" tooltip="Wprowadź numer w formacie: 123456789">
+        <div class="form-control-phone-code">
+          <img src="/images/system/lang_pl.png" alt="">
+          <span>+48</span>
+        </div>
+        <input
+          type="tel"
+          id="phone"
+          name="phone"
+          class="form-control form-control-input"
+          required
+          placeholder="<?= ucfirst(\S::lang('telefon')); ?>"
+          value="<?= htmlspecialchars($address_current['phone']); ?>"
+          pattern="[0-9]{9}">
+      </div>
     </div>
     <div class="form-group">
       <div class="row">
@@ -95,8 +109,26 @@
   <? if ( $this -> client ):?></div><? endif;?>
 </div>
 <script class="footer">
-  $( function()
+  $(document).ready(function () {
-  {
+    function validatePhone() {
+      var phone = $('#phone');
+      var phonePattern = /^[0-9]{9}$/;
+      
+      if (!phone.val() || !phonePattern.test(phone.val())) {
+        $('#order-send').prop('disabled', true);
+      } else {
+        $('#order-send').prop('disabled', false);
+      }
+    }
+
+    $('#phone').on('input', function () {
+      validatePhone();
+    });
+
+    validatePhone();
+  });
+
+  $( function() {
     $( 'body' ).on( click_event, '.addresses .address .btn-select', function(e)
     {
       e.preventDefault();