JavaScript 表單驗證：文件上傳控件有值時關聯 URL 輸入框必填

需求

多組 <input type="file"> + <input type="text" name="url">，選擇文件時對應 URL 必填，未選文件時 URL 可空。

原生 JS 實現

function validateForm() {
    const form = document.forms[0];
    const files = form.querySelectorAll('input[type="file"][name="myfiles"]');
    const urls  = form.querySelectorAll('input[type="text"][name^="url"]');
    
    for (let i = 0; i < files.length; i++) {
        const hasFile = files[i].value.trim() !== '';
        const urlEmpty = urls[i].value.trim() === '';
        
        if (hasFile && urlEmpty) {
            alert(`第 ${i+1} 組：已選文件但 URL 為空！`);
            urls[i].focus();
            return false;
        }
    }
    return true;
}

// 綁定提交事件
document.forms[0].addEventListener('submit', e => {
    if (!validateForm()) e.preventDefault();
});

jQuery 版

$('#myForm').on('submit', function() {
    let ok = true;
    $('input[name="myfiles"]').each(function(idx) {
        if (this.value && !$('input[name="url"]').eq(idx).val()) {
            alert('第 ' + (idx+1) + ' 組 URL 必填');
            $('input[name="url"]').eq(idx).focus();
            ok = false;
            return false; // break each
        }
    });
    return ok;
});

HTML 結構示例

<form id="myForm">
  <div class="group">
    <input type="file" name="myfiles" />
    <input type="text" name="url1" placeholder="圖片鏈接" />
  </div>
  <div class="group">
    <input type="file" name="myfiles" />
    <input type="text" name="url2" placeholder="圖片鏈接" />
  </div>
  <button type="submit">提交</button>
</form>