Html – Adding validations in the Contact number field using ASP.NET Core

can somebody help me with my error. Currently I’m building resident forms this page for Contact page. Now, I want to add validations in the contact fields I want if the resident selects mobile the mobile number should be start at 09. However, when residents select home there no validation regarding the format of number.

The Contact Type Values

1 for Mobile;
2 for Home

See the attached code.

The javascript for the validation of contact number is

function validateContactNumber

RegisterStepThree.cshtml

@model Registration
@{
    ViewData["Title"] = "Register Page - Step Three";
}
<div class="container mt-5">
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center mb-4">Contact Details</h2>
            <form asp-page-handler="RegisterStepThree" method="post">
                <div id="addressesContainer" class="row mt-3 fieldRow">
                    @for (int i = 0; i < 2; i++)
                    {
                        <div class="col-md-2 mb-3">
                            <label class="form-label">Contact type</label>
                            <select class="form-select contact-type" asp-for="Contacts[i].ContactType" onchange="validateContactType(this)" id="contactType@(i)">
                                <option value="">Select Contact Type</option>
                                @foreach (var type in ViewBag.ContactTypes.ContactTypes)
                                {
                                    <option value="@type.CODE_VALUE">@($" {type.Description}") Number</option>
                                }
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label">Contact No</label>
                            <input type="text" class="form-control contact-field" asp-for="Contacts[i].ContactNumber" id="contactNumber@(i+1)" placeholder="Enter contact number" maxlength="11" oninput="validateContactNumber(this)">
                        </div>
                    }
                </div>
                <!-- Error message display area -->
                <div id="error-message" class="text-danger mb-3" style="display: none;"></div>
                <button type="submit" id="submit-button" class="btn btn-primary w-100" disabled>Next</button>
            </form>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        function validateContactType(selectElement) {
            const contactTypeElements = document.querySelectorAll('.contact-type');
            const selectedValues = Array.from(contactTypeElements).map(el => el.value);
            const errorMessageElement = document.getElementById('error-message');

            const hasDuplicates = selectedValues.some((value, index) =>
                value && selectedValues.indexOf(value) !== index
            );

            if (hasDuplicates) {
                errorMessageElement.innerText = 'Contact type already selected';
                errorMessageElement.style.display = 'block';
                selectElement.value = ''; // Reset the current selection
            } else {
                errorMessageElement.style.display = 'none';
            }
            validateForm();
        }

        function validateContactNumber(inputElement) {
            const contactTypeElement = inputElement.closest('.fieldRow').querySelector('.contact-type');
            const errorMessageElement = document.getElementById('error-message');

            inputElement.value = inputElement.value.replace(/[^0-9]/g, '');

            if (contactTypeElement.value === '1') { // Assuming '1' is the value for "Mobile"
                if (!/^09d{9}$/.test(inputElement.value)) {
                    errorMessageElement.innerText = 'Please input a valid mobile number starting with 09';
                    errorMessageElement.style.display = 'block';
                    inputElement.setCustomValidity('Invalid mobile number');
                } else {
                    errorMessageElement.style.display = 'none';
                    inputElement.setCustomValidity('');
                }
            } else {
                inputElement.setCustomValidity('');
            }

            validateForm();
        }

        function validateForm() {
            const contactTypeElements = document.querySelectorAll('.contact-type');
            const contactFieldElements = document.querySelectorAll('.contact-field');
            const submitButton = document.getElementById('submit-button');
            const errorMessageElement = document.getElementById('error-message');

            let isValid = true;

            contactTypeElements.forEach(element => {
                if (element.value === '') {
                    isValid = false;
                }
            });

            contactFieldElements.forEach(element => {
                if (element.value === '' || !element.checkValidity()) {
                    isValid = false;
                }
            });

            if (isValid && errorMessageElement.style.display === 'none') {
                submitButton.disabled = false;
            } else {
                submitButton.disabled = true;
            }
        }

        const contactFields = document.querySelectorAll('.contact-field, .contact-type');
        contactFields.forEach(field => {
            field.addEventListener('input', validateForm);
        });

        document.addEventListener('DOMContentLoaded', validateForm);
    </script>
}