Fungsi dan Validasi JavaScript dengan jQuery

Email Format Validation

document.getElementById('email').addEventListener('input', function() {
    this.value = this.value.toLowerCase().replace(/\s/g, '');

    const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailPattern.test(this.value)) {
        this.setCustomValidity("Format email tidak valid");
    } else {
        this.setCustomValidity("");
    }
});

Lowercase Format Validation

document.addEventListener("DOMContentLoaded", function () {
    const inputLowercase = document.getElementById("lowercase-input");

    inputLowercase.addEventListener("input", function () {
        this.value = this.value.toLowerCase();
    });
});

Uppercase Format Validation

document.addEventListener("DOMContentLoaded", function () {
    const inputUppercase = document.getElementById("uppercase-input");

    inputUppercase.addEventListener("input", function () {
        this.value = this.value.toUpperCase();
    });
});

Disable Button After Submit

document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    const submitButton = document.getElementById('btn-submit');

    form.addEventListener('submit', function() {
        submitButton.disabled = true;
        submitButton.textContent = 'Proses';
    });
});

Form With Multiple Steps

<form id="form-wizard" method="POST" action="{{ route('submit.form') }}">
    @csrf

    <!-- Step 1 -->
    <div class="step" id="step-1">
        <h4>Informasi Identitas</h4>
        <label>Jenis Identitas</label>
        <select name="jenis_identitas">
            <option value="KTP">KTP</option>
            <option value="SIM">SIM</option>
        </select>
        
        <label>No. Identitas</label>
        <input type="text" name="no_identitas">

        <button type="button" class="next-btn">Selanjutnya</button>
    </div>

    <!-- Step 2 -->
    <div class="step" id="step-2" style="display: none;">
        <h4>Informasi Kontak</h4>
        <label>No. NPWP</label>
        <input type="text" name="no_npwp">

        <label>Alamat KTP</label>
        <input type="text" name="alamat_ktp">

        <button type="button" class="prev-btn">Sebelumnya</button>
        <button type="button" class="next-btn">Selanjutnya</button>
    </div>

    <!-- Step 3 -->
    <div class="step" id="step-3" style="display: none;">
        <h4>Informasi Pendapatan</h4>
        <label>Sumber Dana</label>
        <select name="sumber_dana">
            <option value="Gaji">Gaji</option>
            <option value="Usaha">Usaha</option>
        </select>

        <button type="button" class="prev-btn">Sebelumnya</button>
        <button type="submit">Submit</button>
    </div>
</form>

document.addEventListener("DOMContentLoaded", function() {
    let currentStep = 1;
    const totalSteps = document.querySelectorAll(".step").length;

    function showStep(step) {
        document.querySelectorAll(".step").forEach((el, index) => {
            el.style.display = (index + 1 === step) ? "block" : "none";
        });
    }

    document.querySelectorAll(".next-btn").forEach(button => {
        button.addEventListener("click", function() {
            if (currentStep < totalSteps) {
                currentStep++;
                showStep(currentStep);
            }
        });
    });

    document.querySelectorAll(".prev-btn").forEach(button => {
        button.addEventListener("click", function() {
            if (currentStep > 1) {
                currentStep--;
                showStep(currentStep);
            }
        });
    });

    showStep(currentStep);
});

title

code_here

title

code_here