如何基于选定的单选按钮显示和验证文本框

<input type="radio" name="option" value="option1"> Option 1
<input type="text" id="option1Text" style="display: none;"><br>
<input type="radio" name="option" value="option2"> Option 2
<input type="text" id="option2Text" style="display: none;"><br>
<input type="radio" name="option" value="option3"> Option 3
<input type="text" id="option3Text" style="display: none;"><br>

document.querySelectorAll('input[type="radio"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        var textboxId = this.value + 'Text';
        var textbox = document.getElementById(textboxId);
        
        // 隐藏所有文本框
        document.querySelectorAll('input[type="text"]').forEach(function(textbox) {
            textbox.style.display = 'none';
        });
        
        // 显示选定的文本框
        textbox.style.display = 'block';
    });
});

// 获取表单元素和错误提示元素
var form = document.getElementById('myForm');
var error = document.getElementById('error');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止默认提交行为
    
    // 获取选定的单选按钮的值和相应的文本框的值
    var selectedOption = document.querySelector('input[name="option"]:checked');
    var selectedTextbox = document.getElementById(selectedOption.value + 'Text');
    var textboxValue = selectedTextbox.value;
    
    // 验证文本框的值是否符合要求
    if (textboxValue.trim() === '') {
        error.textContent = '文本框不能为空';
    } else {
        error.textContent = ''; // 清空错误提示
        // 执行其他操作，如提交表单数据等
    }
});