چرا تو فرم من بررسی فیلد های ضروری کار نمیکنه و فرم بدون تکمیل فیلد های ضروری ثبت میشه
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sales Data Entry Form</title>
    <style>
        /* Same styles as before */
        body { font-family: Arial, sans-serif; padding: 20px; background-color: #f4f4f9; }
        .form-container { max-width: 900px; margin: 0 auto; background-color: #fff; border: 2px solid #000; border-radius: 10px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
        .form-row { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
        .form-group { flex: 1; min-width: 100%; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group select, .form-group input[type="password"] { width: 100%; padding: 8px; border: 1px solid #000; border-radius: 4px; text-align: center; }
        .form-group input[type="password"] { text-align: left; }
        .product-section { margin-bottom: 30px; padding: 20px; border: 2px solid #000; border-radius: 8px; }
        .product-title { text-align: center; font-size: 24px; margin-bottom: 15px; }
        .product-title img { max-width: 100px; margin-right: 50px; }
        table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        th, td { border: 1px solid #000; padding: 8px; text-align: center; box-sizing: border-box; }
        th { background-color: #e0e0e0; font-weight: bold; }
        input[type="text"] { width: 100%; padding: 8px; border: 1px solid #000; border-radius: 4px; text-align: right; box-sizing: border-box; }
        input[type="text"]:focus { border-color: #4CAF50; outline: none; }
        button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; display: block; margin: 20px auto; }
        button:hover { background-color: #45a049; }
        .gap-reason { margin-top: 20px; padding: 10px; border: 1px solid #000; border-radius: 4px; box-sizing: border-box; }
        .gap-reason label { display: block; margin-bottom: 5px; }
        .gap-reason textarea { width: 100%; padding: 8px; border: 1px solid #000; border-radius: 4px; box-sizing: border-box; }
        .product-section.oil { background-color: #faecc0; }
        .product-section.ph { background-color: #d6c3b8; }
        .product-section.tuna { background-color: #91d3db; }
        @media (min-width: 600px) { .form-group { min-width: calc(50% - 10px); } }
        @media (max-width: 600px) { .form-container { padding: 10px; } .product-title img { max-width: 80px; } button { width: 100%; } }
    </style>
</head>
<body>
    <div class="form-container">
        <h3>Sales Data Entry Form</h3>
        <form id="sales-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="branch">Branch:</label>
                    <select id="branch" name="branch" required>
                        <!-- Branch options (same as before) -->
                        <option value="" disabled selected>Select a branch</option>
                        <option value="Ahvaz">Ahvaz</option>
                        <option value="Amol">Amol</option>
                        <option value="Arak">Arak</option>
                        <option value="Esfahan">Esfahan</option>
                        <option value="Gorgan">Gorgan</option>
                        <option value="Hamedan">Hamedan</option>
                        <option value="Karaj">Karaj</option>
                        <option value="Kermanshah">Kermanshah</option>
                        <option value="Mashhad">Mashhad</option>
                        <option value="Oromieh">Oromieh</option>
                        <option value="Qazvin">Qazvin</option>
                        <option value="Qom">Qom</option>
                        <option value="Rasht">Rasht</option>
                        <option value="Shiraz">Shiraz</option>
                        <option value="Tabriz">Tabriz</option>
                        <option value="Tehran East">Tehran East</option>
                        <option value="Tehran West">Tehran West</option>
                        <option value="Zanjan">Zanjan</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="password">Password:</label>
                    <input type="password" id="password" name="password" required>
                </div>
            </div>

            <!-- Oil Section (Repeat for other sections like PH and Tuna) -->
            <div class="product-section oil">
                <div class="product-title">
                    <img src="https://i.imgur.com/egxoAsJ.png" alt="Oil">
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>Customer Group</th>
                            <th>Today Sales</th>
                            <th>Today Ach%</th>
                            <th>MTD Sales</th>
                            <th>MTD Ach%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>RTL</td>
                            <td><input type="text" id="rtlTodaySalesOil" name="rtlTodaySalesOil" required></td>
                            <td><input type="text" id="rtlTodayAchOil" name="rtlTodayAchOil" required></td>
                            <td><input type="text" id="rtlMtdSalesOil" name="rtlMtdSalesOil" required></td>
                            <td><input type="text" id="rtlMtdAchOil" name="rtlMtdAchOil" required></td>
                        </tr>
                        <tr>
                            <td>WS</td>
                            <td><input type="text" id="wsTodaySalesOil" name="wsTodaySalesOil" required></td>
                            <td><input type="text" id="wsTodayAchOil" name="wsTodayAchOil" required></td>
                            <td><input type="text" id="wsMtdSalesOil" name="wsMtdSalesOil" required></td>
                            <td><input type="text" id="wsMtdAchOil" name="wsMtdAchOil" required></td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <thead>
                        <tr>
                            <th>MTD Distribution Number</th>
                            <th>MTD Distribution Ach%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" id="mtdDistributionNumberOil" name="mtdDistributionNumberOil" required></td>
                            <td><input type="text" id="mtdDistributionAchOil" name="mtdDistributionAchOil" required></td>
                        </tr>
                    </tbody>
                </table>
                <div class="gap-reason">
                    <label for="gapReasonOil">Gap Reason:</label>
                    <textarea id="gapReasonOil" name="gapReasonOil" rows="3" placeholder="Explain the gap reason here..."></textarea>
                </div>
                <button type="button" onclick="submitSection('Oil')">Submit Oil Data</button>
            </div>

            <!-- Repeat sections for PH and Tuna -->
<div class="product-section PH">
                <div class="product-title">
                    <img src="https://i.imgur.com/12zeZik.png" alt="PH">
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>Customer Group</th>
                            <th>Today Sales</th>
                            <th>Today Ach%</th>
                            <th>MTD Sales</th>
                            <th>MTD Ach%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>RTL</td>
                            <td><input type="text" id="rtlTodaySalesPH" name="rtlTodaySalesPH" required></td>
                            <td><input type="text" id="rtlTodayAchPH" name="rtlTodayAchPH" required></td>
                            <td><input type="text" id="rtlMtdSalesPH" name="rtlMtdSalesPH" required></td>
                            <td><input type="text" id="rtlMtdAchPH" name="rtlMtdAchPH" required></td>
                        </tr>
                        <tr>
                            <td>WS</td>
                            <td><input type="text" id="wsTodaySalesPH" name="wsTodaySalesPH" required></td>
                            <td><input type="text" id="wsTodayAchPH" name="wsTodayAchPH" required></td>
                            <td><input type="text" id="wsMtdSalesPH" name="wsMtdSalesPH" required></td>
                            <td><input type="text" id="wsMtdAchPH" name="wsMtdAchPH" required></td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <thead>
                        <tr>
                            <th>MTD Distribution Number</th>
                            <th>MTD Distribution Ach%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" id="mtdDistributionNumberPH" name="mtdDistributionNumberPH" required></td>
                            <td><input type="text" id="mtdDistributionAchPH" name="mtdDistributionAchPH" required></td>
                        </tr>
                    </tbody>
                </table>
                <div class="gap-reason">
                    <label for="gapReasonPH">Gap Reason:</label>
                    <textarea id="gapReasonPH" name="gapReasonPH" rows="3" placeholder="Explain the gap reason here..."></textarea>
                </div>
                <button type="button" onclick="submitSection('PH')">Submit PH Data</button>
            </div>
<div class="product-section Tuna">
                <div class="product-title">
                    <img src="https://i.imgur.com/Wx54UDN.png" alt="Tuna">
                </div>
                <table>
                    <thead>
                        <tr>
                            <th>Customer Group</th>
                            <th>Today Sales</th>
                            <th>Today Ach%</th>
                            <th>MTD Sales</th>
                            <th>MTD Ach%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>RTL</td>
                            <td><input type="text" id="rtlTodaySalesTuna" name="rtlTodaySalesTuna" required></td>
                            <td><input type="text" id="rtlTodayAchTuna" name="rtlTodayAchTuna" required></td>
                            <td><input type="text" id="rtlMtdSalesTuna" name="rtlMtdSalesTuna" required></td>
                            <td><input type="text" id="rtlMtdAchTuna" name="rtlMtdAchTuna" required></td>
                        </tr>
                        <tr>
                            <td>WS</td>
                            <td><input type="text" id="wsTodaySalesTuna" name="wsTodaySalesTuna" required></td>
                            <td><input type="text" id="wsTodayAchTuna" name="wsTodayAchTuna" required></td>
                            <td><input type="text" id="wsMtdSalesTuna" name="wsMtdSalesTuna" required></td>
                            <td><input type="text" id="wsMtdAchTuna" name="wsMtdAchTuna" required></td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <thead>
                        <tr>
                            <th>MTD Distribution Number</th>
                            <th>MTD Distribution Ach%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="text" id="mtdDistributionNumberTuna" name="mtdDistributionNumberTuna" required></td>
                            <td><input type="text" id="mtdDistributionAchTuna" name="mtdDistributionAchTuna" required></td>
                        </tr>
                    </tbody>
                </table>
                <div class="gap-reason">
                    <label for="gapReasonTuna">Gap Reason:</label>
                    <textarea id="gapReasonTuna" name="gapReasonTuna" rows="3" placeholder="Explain the gap reason here..."></textarea>
                </div>
                <button type="button" onclick="submitSection('Tuna')">Submit Tuna Data</button>
            </div>

            <div id="response"></div>
        </form>
    </div>

   <script>
    const form = document.getElementById('sales-form');
    const branchPasswords = {
        "Ahvaz": "65122",
        "Amol": "65108",
        "Arak": "65107",
        "Esfahan": "69110",
        "Gorgan": "71110",
        "Hamedan": "72110",
        "Karaj": "75106",
        "Kermanshah": "75104",
        "Mashhad": "77100",
        "Oromieh": "79104",
        "Qazvin": "81110",
        "Qom": "81109",
        "Rasht": "82116",
        "Shiraz": "83122",
        "Tabriz": "84122",
        "Tehran East": "84116",
        "Tehran West": "84116",
        "Zanjan": "90110"
    };

    // Add commas to numeric inputs and restrict to digits only
    form.querySelectorAll('input[type="text"]').forEach(input => {
        input.addEventListener('input', function(e) {
            if (!this.name.includes('gapReason')) {
                this.value = this.value.replace(/\D/g, ''); // Allow only digits
                this.value = this.value.replace(/\B(?=(\d{3})+(?!\d))/g, ","); // Add commas
            }
        });
    });

    async function submitSection(product) {
        const branch = document.getElementById('branch').value;
        const password = document.getElementById('password').value;

        // Validate password
        if (branchPasswords[branch] !== password) {
            alert("Password is incorrect!");
            return;
        }

        // Validate required fields
        let allFilled = true;
        const requiredFields = form.querySelectorAll(`[name^="${product}"][required]`);
        requiredFields.forEach(field => {
            if (!field.value.trim()) {
                alert(`Please fill out the ${field.previousElementSibling.textContent.trim()} field.`);
                field.focus();
                allFilled = false;
                return false;
            }
        });

        if (!allFilled) return;

        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());

        // Add submission time
        data.submissionTime = new Date().toLocaleString();

        // Filter out non-relevant data
        for (const key in data) {
            if (!key.includes(product) && key !== "branch" && key !== "password" && key !== "submissionTime") {
                delete data[key];
            }
        }

        // Send data to Google Apps Script and provide feedback
          google.script.run.withSuccessHandler(() => {
            alert("Data submitted successfully!");
            form.reset();
        }).processForm(data);
    }
</script>



</body>
</html>