Formalar va validatsiya

document.body.innerHTML = `
<form id="ariza">
    <input type="text" name="ism" id="ism" required minlength="3">
    <input type="email" name="email" id="email" required>
    <input type="number" name="yosh" id="yosh" min="18" max="100">
    <input type="checkbox" name="shartlar" id="shartlar">
    <select name="shahar" id="shahar">
        <option value="">Tanlang</option>
        <option value="nam">Namangan</option>
        <option value="tosh">Toshkent</option>
    </select>
    <textarea name="izoh" id="izoh"></textarea>
    <input type="radio" name="jins" value="erkak" id="erkak">
    <input type="radio" name="jins" value="ayol" id="ayol">
    <button type="submit">Yuborish</button>
</form>`;

const ism = document.getElementById("ism");
const shartlar = document.getElementById("shartlar");
const shahar = document.getElementById("shahar");

ism.value = "Husanboy";
shartlar.checked = true;
shahar.value = "nam";

console.log("Matn maydoni :", ism.value);
console.log("Katakcha     :", shartlar.checked);
console.log("Tanlangan    :", shahar.value);
console.log("Tanlangan matn:", shahar.selectedOptions[0].textContent);

// Radio - guruhdan tanlanganini topish
document.getElementById("ayol").checked = true;
const jins = document.querySelector("input[name='jins']:checked");
console.log("Radio        :", jins.value);

// Son maydoni - value HAR DOIM satr
const yosh = document.getElementById("yosh");
yosh.value = "25";
console.log("yosh.value turi     :", typeof yosh.value);
console.log("yosh.valueAsNumber  :", typeof yosh.valueAsNumber);

const forma = document.getElementById("ariza");
let yuborildi = false;
let malumot = null;

forma.addEventListener("submit", (hodisa) => {
    hodisa.preventDefault();       // sahifa qayta yuklanmasin

    yuborildi = true;
    malumot = {
        ism: forma.ism.value,
        email: forma.email.value
    };
});

// Maydonlarni to'ldiramiz
forma.ism.value = "Malika";
forma.email.value = "[email protected]";

forma.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));

console.log("Yuborildimi?:", yuborildi);
console.log("Ism         :", malumot.ism);
console.log("Email       :", malumot.email);

const forma = document.getElementById("ariza");

forma.ism.value = "Nodira";
forma.email.value = "[email protected]";
forma.yosh.value = "23";
forma.izoh.value = "Izoh matni";
document.getElementById("shartlar").checked = true;
document.getElementById("shahar").value = "tosh";

const malumot = new FormData(forma);

console.log("ism    :", malumot.get("ism"));
console.log("email  :", malumot.get("email"));
console.log("shahar :", malumot.get("shahar"));
console.log("shartlar:", malumot.get("shartlar"));

// Oddiy obyektga aylantirish
const obyekt = Object.fromEntries(malumot);
console.log("Kalitlar:", Object.keys(obyekt).join(", "));
console.log("Obyekt yosh:", obyekt.yosh);

const ism = document.getElementById("ism");
const email = document.getElementById("email");

// Bo'sh - required buziladi
ism.value = "";
console.log("Bo'sh ism to'g'rimi?:", ism.checkValidity());
console.log("valueMissing        :", ism.validity.valueMissing);

// Juda qisqa - minlength buziladi
ism.value = "ab";
console.log("Qisqa ism to'g'rimi?:", ism.checkValidity());
console.log("tooShort            :", ism.validity.tooShort);

// To'g'ri
ism.value = "Husanboy";
console.log("To'g'ri ism         :", ism.checkValidity());

// Email formati
email.value = "notogri";
console.log("Noto'g'ri email     :", email.checkValidity());
console.log("typeMismatch        :", email.validity.typeMismatch);

email.value = "[email protected]";
console.log("To'g'ri email       :", email.checkValidity());

const yosh = document.getElementById("yosh");

const holatlar = [
    ["", "bo'sh"],
    ["15", "juda kichik"],
    ["150", "juda katta"],
    ["25", "to'g'ri"]
];

for (const [qiymat, izoh] of holatlar) {
    yosh.value = qiymat;
    const v = yosh.validity;

    const muammolar = [];
    if (v.valueMissing) { muammolar.push("valueMissing"); }
    if (v.rangeUnderflow) { muammolar.push("rangeUnderflow"); }
    if (v.rangeOverflow) { muammolar.push("rangeOverflow"); }

    const holat = v.valid ? "OK" : muammolar.join(", ");
    console.log(`${izoh.padEnd(12)} -> ${holat}`);
}

const parol = document.createElement("input");
parol.type = "password";
parol.required = true;
document.getElementById("ariza").appendChild(parol);

function parolniTekshirish(qiymat) {
    if (qiymat.length < 8) {
        return "Parol kamida 8 belgi bo'lishi kerak";
    }
    if (!/[A-Z]/.test(qiymat)) {
        return "Kamida bitta katta harf kerak";
    }
    if (!/\d/.test(qiymat)) {
        return "Kamida bitta raqam kerak";
    }
    return "";
}

const sinovlar = ["qisqa", "uzunlekin", "Uzunlekin", "Uzunlekin1"];

for (const sinov of sinovlar) {
    parol.value = sinov;
    const xato = parolniTekshirish(sinov);
    parol.setCustomValidity(xato);

    console.log(`${sinov.padEnd(12)} -> ${parol.checkValidity() ? "OK" : parol.validationMessage}`);
}

const forma = document.getElementById("ariza");

function xatoKorsatish(maydon, xabar) {
    maydon.classList.toggle("xato", Boolean(xabar));
    let element = maydon.nextElementSibling;

    if (!element || !element.classList.contains("xato-xabar")) {
        element = document.createElement("small");
        element.className = "xato-xabar";
        maydon.after(element);
    }

    element.textContent = xabar;
}

function formaniTekshirish() {
    const xatolar = [];

    for (const maydon of forma.elements) {
        if (!maydon.name) {
            continue;
        }

        if (!maydon.checkValidity()) {
            xatoKorsatish(maydon, maydon.validationMessage);
            xatolar.push(maydon.name);
        } else {
            xatoKorsatish(maydon, "");
        }
    }

    return xatolar;
}

// Bo'sh forma
forma.ism.value = "";
forma.email.value = "";
console.log("Bo'sh formada xatolar:", formaniTekshirish().join(", "));

// To'ldirilgan forma
forma.ism.value = "Aziza";
forma.email.value = "[email protected]";
console.log("To'ldirilgandan keyin:", formaniTekshirish().length, "ta xato");
console.log("Xato klassi qoldimi? :", forma.ism.classList.contains("xato"));

const maydon = document.getElementById("ism");
const hodisalar = [];

maydon.addEventListener("input", () => hodisalar.push("input"));
maydon.addEventListener("change", () => hodisalar.push("change"));

// input - har o'zgarishda
maydon.value = "H";
maydon.dispatchEvent(new Event("input"));
maydon.value = "Hu";
maydon.dispatchEvent(new Event("input"));

// change - fokus yo'qolganda
maydon.dispatchEvent(new Event("change"));

console.log("Hodisalar:", hodisalar.join(" -> "));