New form framework - code helper

HTML

xxxxxxxxxx
 
<!-- External assets (add in MDB snippet editor under "Add external resources")
CSS:
https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css
JS:
https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.js
-->
​
<!-- Sticky Header -->
<header class="position-fixed top-0 start-0 w-100 bg-white border-bottom py-2 px-3 d-flex justify-content-between align-items-center" style="z-index: 1050;">
  <div class="d-flex gap-3 align-items-center">
    <a href="#" title="Personvern" class="text-muted"><i class="fas fa-shield-alt"></i></a>
    <a href="#" title="Tilgjengelighet" class="text-muted"><i class="fas fa-universal-access"></i></a>
    <select class="form-select form-select-sm" aria-label="Språkvalg" style="width: auto;">
      <option selected>NO</option>
      <option value="en">EN</option>
    </select>
  </div>
  <div>
    <span id="cart-summary" class="badge bg-primary px-3 py-2" aria-live="polite">
      🛒 0 valg – NOK 0
    </span>
  </div>
</header>
​
<div class="container py-5 mt-5">
  <!-- Header -->
  <div class="text-center mb-5">
    <img src="https://cdn.arkon.no/arkon/accounts/1766/uploaded/css/4e472842-08f6-11f0-9d2d-02da4459bb77.png" alt="Logo" class="img-fluid mb-4" style="max-height: 80px;">
    <h1 class="h3 fw-bold">Lorem ipsum dolor sit amet</h1>
    <p class="lead text-muted">Consectetur adipiscing elit. Morbi ut bibendum nulla, ac fermentum purus. Vennligst fyll ut skjemaet for å registrere deg.</p>
  </div>
​
  <form id="registration-form" class="needs-validation" novalidate>
    <div class="card border shadow-sm p-4 mb-4">
      <h5>Personlig informasjon</h5>
​
      <div class="mb-3">
        <label class="form-label" for="first-name">Fornavn</label>
        <input type="text" id="first-name" class="form-control" required />
        <div class="form-text">Skriv inn ditt fornavn.</div>
        <div class="invalid-feedback">Vennligst fyll ut fornavn.</div>
      </div>
​
      <div class="mb-3">
        <label class="form-label" for="last-name">Etternavn</label>
        <input type="text" id="last-name" class="form-control" required />
        <div class="form-text">Skriv inn ditt etternavn.</div>
        <div class="invalid-feedback">Vennligst fyll ut etternavn.</div>
      </div>
​
      <div class="mb-3">
        <label class="form-label" for="email">E-post</label>
        <input type="email" id="email" class="form-control" required />
        <div class="form-text">Vi sender bekreftelse til denne adressen.</div>
        <div class="invalid-feedback">Oppgi en gyldig e-postadresse.</div>
      </div>
​
   
      <div class="mb-3">
        <label class="form-label d-block">Telefonnummer</label>
        <div class="input-group">
          <select class="form-select" id="prefix" name="prefix" style="max-width: 150px;" required>
            <option value="+47" selected>🇳🇴 NOR +47</option>
            <option value="+46">🇸🇪 SWE +46</option>
            <option value="+45">🇩🇰 DEN +45</option>
            <option value="+358">🇫🇮 FIN +358</option>
          </select>
          <input type="tel" id="phone" name="phone" class="form-control" placeholder="12345678" required>
        </div>
        <div class="invalid-feedback">Vennligst oppgi et telefonnummer.</div>
      </div>
​
​
​
      <div class="mb-3">
        <label class="form-label" for="datepicker">Velg dato</label>
        <input type="text" class="form-control" id="datepicker" />
        <div class="form-text">Velg en dato for deltakelse.</div>
        <div class="invalid-feedback">Vennligst velg en dato.</div>
        <div id="selected-date-display" class="form-text text-muted mt-1"></div>
      </div>
​
      <div class="mb-3">
        <label class="form-label">Datointervall</label>
        <div class="row g-2">
          <div class="col-sm-6">
            <input type="text" class="form-control" id="start-date" placeholder="Startdato" />
          </div>
          <div class="col-sm-6">
            <input type="text" class="form-control" id="end-date" placeholder="Sluttdato" />
          </div>
        </div>
        <div id="date-range-display" class="form-text text-muted mt-1"></div>
      </div>
​
      <div class="mb-3">
        <label class="form-label" for="gender">Kjønn</label>
        <select class="form-select" id="gender" required>
          <option value="" disabled selected>Kjønn</option>
          <option value="male">Mann</option>
          <option value="female">Kvinne</option>
          <option value="other">Annet</option>
        </select>
        <div class="invalid-feedback">Vennligst velg kjønn.</div>
      </div>
    </div>
​
    <!-- Tilvalg -->
    <div class="card border shadow-sm p-4 mb-4">
      <fieldset id="extra-options" data-min="1" data-max="2">
        <legend class="mb-3 fs-5">Valgfrie tillegg (1–2 valg tillatt)</legend>
        <div class="form-check mb-2">
          <input class="form-check-input price-item" type="checkbox" value="200" id="addon1">
          <label class="form-check-label" for="addon1">Ekstra frokost – NOK 200</label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input price-item" type="checkbox" value="150" id="addon2">
          <label class="form-check-label" for="addon2">Sen utsjekk – NOK 150</label>
        </div>
        <div class="form-check mb-2">
          <input class="form-check-input price-item" type="checkbox" value="100" id="addon3">
          <label class="form-check-label" for="addon3">Transport til flyplass – NOK 100</label>
        </div>
        <div id="group-feedback" class="form-text mt-2 text-muted"></div>
      </fieldset>
    </div>
    
   <!-- Bildeopplasting med forhåndsvisning og crop -->
      <div class="mb-4">
        <label for="profile-image" class="form-label">Last opp profilbilde</label>
        <input class="form-control" type="file" id="profile-image" name="profile-image" accept="image/*">
        <div class="form-text">Velg et bilde i JPG eller PNG-format. Maks 5 MB.</div>
        <div class="mt-3">
          <img id="preview-image" src="#" alt="Forhåndsvisning" class="img-thumbnail d-none" style="max-height: 200px;">
        </div>
        <div class="mt-2">
          <canvas id="cropped-canvas" class="d-none"></canvas>
        </div>
      </div>
​
      <!-- Filopplasting (generelt) -->
      <div class="mb-4">
        <label for="attachment" class="form-label">Last opp vedlegg</label>
        <input class="form-control" type="file" id="attachment" name="attachment">
        <div class="form-text">Last opp dokumenter som PDF eller DOCX (maks 10 MB).</div>
      </div>
    </div>
​
    </div>
​
    <div class="text-end">
      <button type="submit" class="btn btn-success">Send inn</button>
    </div>
  </form>
</div>
​
<script>
​
</script>
​
​

CSS

xxxxxxxxxx
 
<!-- External assets (add in MDB snippet editor under "Add external resources")
​
https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css
https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css
https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css
JS:
https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.js
https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js
https://cdnjs.cloudflare.com/ajax/libs/libphonenumber-js/1.10.25/libphonenumber-js.min.js
https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js
https://ipapi.co/json/
-->
​
​
.form-text {
margin-top: .05rem;
font-size: .8em;
color: #757575;
}
​
.form-text {
  display: none;
}
​
input:focus + .form-text,
select:focus + .form-text,
textarea:focus + .form-text {
  display: block;
}

xxxxxxxxxx
 
 const dateInput = document.getElementById('datepicker');
  const dateOutput = document.getElementById('selected-date-display');
  dateInput.addEventListener('change', function () {
    if (this.value) {
      const date = new Date(this.value);
      const options = { day: '2-digit', month: 'long', year: 'numeric' };
      dateOutput.textContent = `Valgt dato: ${date.toLocaleDateString('no-NO', options)}`;
    } else {
      dateOutput.textContent = '';
    }
  });
​
  // Prisberegning
  function updateCartSummary() {
    const checked = document.querySelectorAll('.price-item:checked');
    const total = [...checked].reduce((sum, el) => sum + parseInt(el.value), 0);
    const count = checked.length;
    const cart = document.getElementById('cart-summary');
    cart.innerText = `🛒 ${count} valg – NOK ${total}`;
  }
​
  document.querySelectorAll('.price-item').forEach(item => {
    item.addEventListener('change', () => {// Tom Select init
new TomSelect("#phone-prefix", {
  allowEmptyOption: false,
  placeholder: "Velg land...",
  render: {
    option: function(data, escape) {
      return data.html || `<div>${escape(data.text)}</div>`;
    },
    item: function(data, escape) {
      return data.html || `<div>${escape(data.text)}</div>`;
    }
  }
});
​
const countryOptions = [
  { code: "NO", value: "+47", name: "Norway", flag: "no" },
  { code: "SE", value: "+46", name: "Sweden", flag: "se" },
  { code: "DK", value: "+45", name: "Denmark", flag: "dk" },
  { code: "FI", value: "+358", name: "Finland", flag: "fi" },
  { code: "GB", value: "+44", name: "UK", flag: "gb" },
  { code: "DE", value: "+49", name: "Germany", flag: "de" },
];
​
const prefixSelect = document.getElementById("phone-prefix");
countryOptions.forEach(({ code, value, name, flag }) => {
  const option = document.createElement("option");
  option.value = code;
  option.innerHTML = `<img src='https://flagcdn.com/${flag}.svg' width='20' class='me-2'> ${value} ${name}`;
  option.dataset.html = option.innerHTML;
  prefixSelect.appendChild(option);
});
​
const ts = new TomSelect("#phone-prefix", {
  allowEmptyOption: false,
  render: {
    option: function(data, escape) {
      return data.html || `<div>${escape(data.text)}</div>`;
    },
    item: function(data, escape) {
      return data.html || `<div>${escape(data.text)}</div>`;
    }
  }
});
​
fetch('https://ipapi.co/json/')
  .then(res => res.json())
  .then(data => {
    const cc = data.country_code;
    const found = countryOptions.find(opt => opt.code === cc);
    if (found) ts.setValue(found.code);
  });
​
const phoneInput = document.getElementById('phone-number');
const phoneError = document.getElementById('phone-error');
​
phoneInput.addEventListener('blur', () => {
  const number = phoneInput.value;
  const region = ts.getValue();
  try {
    const parsed = libphonenumber.parsePhoneNumber(number, region);
    if (parsed && parsed.isValid()) {
      phoneInput.classList.remove('is-invalid');
      phoneError.style.display = 'none';
    } else {
      phoneInput.classList.add('is-invalid');
      phoneError.style.display = 'block';
    }
  } catch {
    phoneInput.classList.add('is-invalid');
    phoneError.style.display = 'block';
  }
});
​
document.getElementById('reset-phone').addEventListener('click', () => {
  phoneInput.value = '';
  ts.clear();
});
​
// Bilde crop
let cropper;
const profileImageInput = document.getElementById('profile-image');
const previewImage = document.getElementById('preview-image');
const croppedCanvas = document.getElementById('cropped-canvas');
const croppedInput = document.getElementById('croppedImage');
​
profileImageInput.addEventListener('change', function (e) {
  const file = e.target.files[0];
  if (file && file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onload = function (event) {
      previewImage.src = event.target.result;
      previewImage.classList.remove('d-none');
      if (cropper) cropper.destroy();
      cropper = new Cropper(previewImage, {
        aspectRatio: 1,
        viewMode: 1,
        autoCropArea: 1,
        cropend() {
          const canvas = cropper.getCroppedCanvas({ width: 200, height: 200 });
          croppedCanvas.classList.remove('d-none');
          croppedCanvas.width = canvas.width;
          croppedCanvas.height = canvas.height;
          const ctx = croppedCanvas.getContext('2d');
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(canvas, 0, 0);
          croppedInput.value = canvas.toDataURL('image/png');
        }
      });
    };
    reader.readAsDataURL(file);
  }
});
​
// Nullstill-knapp
const resetBtn = document.getElementById('reset-phone');
resetBtn.addEventListener('click', () => {
  document.getElementById('phone-number').value = '';
  const instance = document.querySelector('#phone-prefix').tomselect;
  if (instance) instance.clear();
});
​
// Bildeopplasting med crop
let cropper;
const profileImageInput = document.getElementById('profile-image');
const previewImage = document.getElementById('preview-image');
const croppedCanvas = document.getElementById('cropped-canvas');
const croppedInput = document.getElementById('croppedImage');
​
profileImageInput.addEventListener('change', function (e) {
  const file = e.target.files[0];
  if (file && file.type.startsWith('image/')) {
    const reader = new FileReader();
    reader.onload = function (event) {
      previewImage.src = event.target.result;
      previewImage.classList.remove('d-none');
      if (cropper) cropper.destroy();
      cropper = new Cropper(previewImage, {
        aspectRatio: 1,
        viewMode: 1,
        autoCropArea: 1,
        cropend() {
          const canvas = cropper.getCroppedCanvas({ width: 200, height: 200 });
          croppedCanvas.classList.remove('d-none');
          croppedCanvas.width = canvas.width;
          croppedCanvas.height = canvas.height;
          const ctx = croppedCanvas.getContext('2d');
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(canvas, 0, 0);
          croppedInput.value = canvas.toDataURL('image/png');
        }
      });
    };
    reader.readAsDataURL(file);
  }
});
      updateCartSummary();
      validateCheckboxGroup();
    });
  });
​
  // Validering av min/max checkbokser
  function validateCheckboxGroup() {
    const group = document.getElementById('extra-options');
    const min = parseInt(group.dataset.min);
    const max = parseInt(group.dataset.max);
    const selected = group.querySelectorAll('input[type="checkbox"]:checked').length;
    const feedback = document.getElementById('group-feedback');
​
    if (selected < min || selected > max) {
      feedback.classList.remove('text-success');
      feedback.classList.add('text-danger');
      feedback.innerText = `Vennligst velg mellom ${min} og ${max} tillegg.`;
      return false;
    } else {
      feedback.classList.remove('text-danger');
      feedback.classList.add('text-success');
      feedback.innerText = `Du har valgt ${selected} tillegg.`;
      return true;
    }
  }
​
  // Formvalidering
  const form = document.getElementById('registration-form');
  form.addEventListener('submit', function (e) {
    let valid = form.checkValidity();
    if (!validateCheckboxGroup()) valid = false;
​
    if (!valid) {
      e.preventDefault();
      e.stopPropagation();
    }
    form.classList.add('was-validated');
  });
​
// Initialiser MDB Datepicker
const datepickerEl = document.getElementById('datepicker');
if (datepickerEl) {
  new mdb.Datepicker(datepickerEl, {
    format: 'dd.mm.yyyy',
    weekStart: 1,
    disablePast: true,
    inline: false
  });
​
  // Forhåndsvis valgt dato
  datepickerEl.addEventListener('change', function () {
    const selected = this.value;
    const output = document.getElementById('selected-date-display');
    output.textContent = selected ? `Valgt dato: ${selected}` : '';
  });
}

Console errors: 0