JavaScript动态验证HTML控件：联动验证文本域与下拉框

Hey there! Let's fix this validation issue for your dynamically generated controls—this is a common scenario when working with server-side generated elements, and we can solve it by treating each dropdown-textarea pair as a single validation unit. Here's how to do it step by step:

Key Idea #

Since your VB.NET generates paired controls with consistent ID patterns (txt_comments_X and validate_X, where X is a unique identifier), we can use that pattern to link each dropdown to its corresponding textarea in JavaScript. Then we'll validate each pair together instead of checking controls individually.

Step 1: Ensure Consistent ID Naming in VB.NET #

First, double-check that your VB.NET code generates paired IDs with matching suffixes. For example:

' Example VB.NET code to generate paired textarea & dropdown
For i As Integer = 1 To 3 ' Adjust the loop based on your needs
    ' Create textarea
    Dim commentsTextarea As New TextBox()
    commentsTextarea.ID = $"txt_comments_{i}"
    commentsTextarea.TextMode = TextBoxMode.MultiLine
    commentsTextarea.Rows = 3
    Me.Controls.Add(commentsTextarea)

    ' Create corresponding dropdown
    Dim validateDropdown As New DropDownList()
    validateDropdown.ID = $"validate_{i}"
    validateDropdown.Items.Add(New ListItem("Please select an option", ""))
    validateDropdown.Items.Add(New ListItem("Yes", "Yes"))
    validateDropdown.Items.Add(New ListItem("No", "No"))
    Me.Controls.Add(validateDropdown)
Next

This ensures every validate_X dropdown has a matching txt_comments_X textarea.

Step 2: JavaScript Validation Function #

Now write a function that loops through all dropdowns, finds their paired textarea, and applies your validation rules:

function validateAllControls() {
    let isFormValid = true;
    const errorList = [];

    // Grab all dropdowns starting with "validate"
    const allDropdowns = document.querySelectorAll('select[id^="validate"]');

    allDropdowns.forEach(dropdown => {
        // Find the matching textarea by swapping ID prefixes
        const textareaId = dropdown.id.replace('validate', 'txt_comments');
        const pairedTextarea = document.getElementById(textareaId);

        if (!pairedTextarea) {
            errorList.push(`Missing textarea for dropdown: ${dropdown.id}`);
            isFormValid = false;
            return;
        }

        // Rule 1: Dropdown must have a selected value
        if (!dropdown.value || dropdown.value === "") {
            errorList.push(`Please select an option for the dropdown paired with ${textareaId}`);
            isFormValid = false;
        } else {
            // Rule 2: If "Yes" is selected, textarea needs 1-1000 characters
            if (dropdown.value === "Yes") {
                pairedTextarea.disabled = false; // Ensure textarea is enabled
                const textLength = pairedTextarea.value.trim().length;
                if (textLength < 1 || textLength > 1000) {
                    errorList.push(`Textarea ${textareaId} must contain 1 to 1000 characters when "Yes" is selected`);
                    isFormValid = false;
                }
            } 
            // Rule 3: If "No" is selected, disable textarea (optional but better UX)
            else if (dropdown.value === "No") {
                pairedTextarea.disabled = true;
                // No need to check content—blank is allowed
            }
        }
    });

    // Show all errors at once if validation fails
    if (!isFormValid) {
        alert("Validation errors:\n" + errorList.join("\n"));
    }

    return isFormValid;
}

// Attach validation to your form's submit event
document.getElementById("yourFormId").addEventListener("submit", function(e) {
    if (!validateAllControls()) {
        e.preventDefault(); // Stop form from submitting if invalid
    }
});

How This Works #

1. We use querySelectorAll('select[id^="validate"]') to grab all dynamically generated dropdowns, regardless of how many there are.
2. For each dropdown, we swap the ID prefix (validate → txt_comments) to find its paired textarea.
3. We validate each pair against your three rules, collecting all errors to display in a single alert.
4. We hook the validation function to your form's submit event to block invalid submissions.

This approach scales seamlessly—no matter how many control pairs VB.NET generates, the JavaScript will validate all of them together.

内容的提问来源于stack exchange，提问作者Santosh