the following form does not validate the input fields before i click on the calculate cost button and also the hiddenCost is not displaying after i click the calculate cost button, please fix the issue without changing the style and without removing the onclick on the submit button: <!DOCTYPE html>
<html lang="en">
<head>
    <title>Steel Construction Cost Estimate</title>
    <style>
        .form-container {
            max-width: 600px;
            height: 920px; /* Adjust the height to your desired size */
            margin: auto;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px; /* Set the font size here */
            font-family: Arial, sans-serif; /* Change the font family here */
        }

        label, input, button, select {
            display: block;
            margin: 1px 0;
        }

        .dropdown-group {
            margin-bottom: 5px;
        }

        .dropdown-group label {
            display: block; /* Makes the label appear on a new line */
        }

        button {
            background-color: orangered;
            color: white;
            cursor: pointer;
        }

        label.required::after {
            content: "*";
            color: orangered;
            margin-left: 5px;
        }

        #estimatedCost {
            font-weight: bold;
            margin-top: 5px;
        }

        .radio-group label {
            display: inline-block;
            margin-right: 10px; /* Adjust the margin between radio buttons */
        }

        .radio-group input[type="radio"] {
            display: inline-block;
            margin-right: 5px; /* Adjust the margin between radio buttons */
        }

    </style>
</head>
<body>

<div class="form-container">
    <form id="fd88d2c" onsubmit="return calculateCost()">

        <div>
            <label for="name-764" class="required">Name:</label>
            [text* name-764 id:name-764 placeholder "Name*"]
            
            <label for="email-254" class="required">Email:</label>
            [email* email-254 id:email-254 placeholder "Email*"]
           
            <label for="tel-784" class="required">Telephone Number:</label>
            [tel* tel-784 id:tel-784 placeholder "Telephone Number*"]          
        </div>


        <div>
            <p>Standard Height: 4.5m</p>
        </div>

        <div class="radio-group">
            <label>Select Material:</label>
            <label><input type="radio" name="material" value="chromadek" checked> Chromadek</label>
            <label><input type="radio" name="material" value="galvanized"> Galvanized</label>
        </div>

        <div class="dropdown-group">
            <label for="lengthInput">Enter Length (in meters):</label>
            <input type="text" id="lengthInput" name="length" min="5" max="100" onblur="checkLengthValidity()">
        </div>

        <div class="dropdown-group">
            <label for="widthDropdown">Select Width (in meters):</label>
            <select id="widthDropdown" name="width" onchange="checkFormValidity()">
                <option value="">Select Width</option>
                <option value="40">40m</option>
                <option value="35">35m</option>
                <option value="30">30m</option>
                <option value="25">25m</option>
                <option value="20">20m</option>
                <option value="18">18m</option>
                <option value="15">15m</option>
                <option value="12">12m</option>
            </select>
        </div>

        <div class="dropdown-group">
            <label for="sourceDropdown">Where did you hear about us?</label>
            <select id="sourceDropdown" name="source" onchange="checkFormValidity()">
                <option value="">Select Source</option>
                <option value="website">Website</option>
                <option value="referral">Referral from someone</option>
                <option value="onsite">Saw us on site</option>
                <option value="linkedin">LinkedIn</option>
                <option value="facebook">Facebook</option>
                <option value="instagram">Instagram</option>
                <option value="vehicle">Vehicle branding</option>
                <option value="other">Other</option>
            </select>
        </div>

        <button type="submit" id="calculateButton" onclick="calculateCost()">Calculate Cost</button>
        <input type="hidden" id="hiddenCost" name="hiddenCost" value="">
    </form>

    <div id="estimatedCost"></div>
</div>

<script>
    var pricing = {
        'chromadek': {
            '5-20': {'40': 1091, '35': 1201, '30': 1068, '25': 1022, '20': 944, '18': 871, '15': 799, '12': 1010},
            '21-30': {'40': 1057, '35': 1167, '30': 1029, '25': 984, '20': 913, '18': 844, '15': 778, '12': 983},
            '31-40': {'40': 1018, '35': 1127, '30': 985, '25': 942, '20': 877, '18': 814, '15': 754, '12': 952},
            '41-50': {'40': 996, '35': 1104, '30': 960, '25': 917, '20': 857, '18': 796, '15': 741, '12': 935},
            '51-60': {'40': 983, '35': 1090, '30': 945, '25': 902, '20': 845, '18': 786, '15': 733, '12': 924},
            '61-70': {'40': 973, '35': 1081, '30': 934, '25': 892, '20': 836, '18': 778, '15': 727, '12': 917},
            '71-80': {'40': 966, '35': 1073, '30': 926, '25': 884, '20': 830, '18': 773, '15': 723, '12': 911},
            '81-90': {'40': 961, '35': 1068, '30': 920, '25': 878, '20': 825, '18': 769, '15': 720, '12': 907},
            '91-100': {'40': 951, '35': 1064, '30': 915, '25': 874, '20': 821, '18': 765, '15': 717, '12': 903}
            // Add the rest of the Chromadek pricing data in the same format
        },
        'galvanized': {
            '5-20': {'40': 1029, '35': 1140, '30': 1006, '25': 960, '20': 882, '18': 807, '15': 734, '12': 930},
            '21-30': {'40': 995, '35': 1105, '30': 968, '25': 922, '20': 851, '18': 781, '15': 713, '12': 903},
            '31-40': {'40': 957, '35': 1066, '30': 925, '25': 880, '20': 816, '18': 751, '15': 690, '12': 873},
            '41-50': {'40': 935, '35': 1044, '30': 900, '25': 856, '20': 796, '18': 734, '15': 678, '12': 856},
            '51-60': {'40': 922, '35': 1030, '30': 885, '25': 841, '20': 783, '18': 724, '15': 670, '12': 845},
            '61-70': {'40': 912, '35': 1020, '30': 874, '25': 831, '20': 775, '18': 716, '15': 664, '12': 838},
            '71-80': {'40': 905, '35': 1013, '30': 866, '25': 823, '20': 768, '18': 711, '15': 660, '12': 832},
            '81-90': {'40': 900, '35': 1008, '30': 860, '25': 818, '20': 764, '18': 707, '15': 657, '12': 828},
            '91-100': {'40': 896, '35': 1004, '30': 855, '25': 813, '20': 760, '18': 704, '15': 654, '12': 825}
            // Add the rest of the Galvanized pricing data in the same format
        }
    };

function checkFormValidity() {
    var name = document.getElementById('name-764').value;
    var email = document.getElementById('email-254').value;
    var tel = document.getElementById('tel-784').value;
    var lengthInput = document.getElementById('lengthInput').value;
    var widthDropdown = document.getElementById('widthDropdown').value;
    var sourceDropdown = document.getElementById('sourceDropdown').value;

    // Check each field and jump to the first empty field
    if (name === '') {
        document.getElementById('name-764').focus();
        document.getElementById('estimatedCost').innerHTML = "Please enter your name.";
        return false; // Prevent form submission
    } else if (email === '') {
        document.getElementById('email-254').focus();
        document.getElementById('estimatedCost').innerHTML = "Please enter your email.";
        return false; // Prevent form submission
    } else if (tel === '') {
        document.getElementById('tel-784').focus();
        document.getElementById('estimatedCost').innerHTML = "Please enter your telephone number.";
        return false; // Prevent form submission
    } else if (lengthInput === '' || (lengthInput !== '' && lengthInput.length < 2)) {
        document.getElementById('lengthInput').focus();
        document.getElementById('estimatedCost').innerHTML = "Please enter length and select width.";
        return false; // Prevent form submission
    } else if (widthDropdown === '') {
        document.getElementById('widthDropdown').focus();
        document.getElementById('estimatedCost').innerHTML = "Please select width.";
        return false; // Prevent form submission
    } else if (sourceDropdown === '' || sourceDropdown === null) {
        document.getElementById('sourceDropdown').focus();
        document.getElementById('estimatedCost').innerHTML = "Please select source.";
        return false; // Prevent form submission
    }

    // If all fields are filled, enable the calculate button
    document.getElementById('calculateButton').disabled = false;
    return true; // Allow form submission
}

function calculateCost() {
    var name = document.getElementById('name-764').value;
    var email = document.getElementById('email-254').value;
    var tel = document.getElementById('tel-784').value;
    var lengthInput = document.getElementById('lengthInput').value;
    var width = document.getElementById('widthDropdown').value;
    var sourceDropdown = document.getElementById('sourceDropdown').value;

    if (name === '' || email === '' || tel === '') {
        document.getElementById('estimatedCost').innerHTML = "Please fill in your contact information (name, email, and telephone number).";
        return false;
    }

    if (lengthInput === "" || width === "" || sourceDropdown === "" || sourceDropdown === null) {
        document.getElementById("estimatedCost").innerHTML = "Please enter length, select width, and choose source.";
        return false;
    }

    var material = document.querySelector('input[name="material"]:checked').value;

    var totalCost = calculateLengthWidthCost(lengthInput, width, material);

    var formattedCost = totalCost.toLocaleString();

    document.getElementById('hiddenCost').value = formattedCost;

    document.getElementById("estimatedCost").innerHTML = "Estimated Total Cost: R " + formattedCost + " Excl. VAT";
    
    return false; // Prevent form submission
}

    function calculateLengthWidthCost(lengthInput, width, material) {
        var totalLength = parseInt(lengthInput);
        var widthCost = parseInt(width);

        var lengthRange = getLengthRange(totalLength);
        var costPerSquareMeter = pricing[material][lengthRange][widthCost.toString()];

        return totalLength * widthCost * costPerSquareMeter;
    }

    function getLengthRange(length) {
        if (length >= 5 && length <= 20) {
            return '5-20';
        } else if (length >= 21 && length <= 30) {
            return '21-30';
        } else if (length >= 31 && length <= 40) {
            return '31-40';
        } else if (length >= 41 && length <= 50) {
            return '41-50';
        } else if (length >= 51 && length <= 60) {
            return '51-60';
        } else if (length >= 61 && length <= 70) {
            return '61-70';
        } else if (length >= 71 && length <= 80) {
            return '71-80';
        } else if (length >= 81 && length <= 90) {
            return '81-90';
        } else if (length >= 91 && length <= 100) {
            return '91-100';
        } else {
            return '';
        }
    }

    function checkLengthValidity() {
        var lengthInput = document.getElementById('lengthInput').value;

        if (lengthInput !== '' && lengthInput.length < 2) {
            document.getElementById('lengthInput').focus();
            return false; // Prevent form submission
        }

        // Continue with other validations if needed
    }
</script>

</body>
</html>