2013-09-24 83 views
0

我正在做一個清單,需要每次工作人員完成此特定表單時完成。請注意,由於沒有大量時間進行研究,我仍然在慢慢地抓住JS。Javascript驗證複選框和單選按鈕

我已經做了一些研究,並結合了一些不同的驗證樣式,並提出了這個;

function validate(form) { 
    var e = form.elements; 

    if(e['reloaded'].value == "yes") { 
     if(!e['Q1-A'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Q1-B'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Q1-C'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Q1-D'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Q1-E'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Q1-G'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Gen-A'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Gen-B'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['invoice_number'].value) { 
      alert('Invoice Number is REQUIRED!'); 
      return false; 
     } 
     return true; 

    } else if(e['reloaded'].value == "no") { 
     if(!e['Gen-A'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Gen-B'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['Q2-A'].value) { 
      alert('You Must complete the Checklist!'); 
      return false; 
     } 
     if(!e['invoice_number'].value) { 
      alert('Invoice Number is REQUIRED!'); 
      return false; 
     } 
     return true; 

    } else if(!e['reloaded'].value) { 
     alert('You must indicate if you Reloaded the OS!'); 
     return false; 
    } 
} 

在這個階段,它只是簡單地返回「您必須指出您是否重新加載操作系統!」即使它被選中。

關鍵是從單選按鈕選擇中選擇一個選項,然後它會顯示一些複選框,並且必須在提交表單之前檢查所有複選框。顯然,某些複選框僅在選擇某個特定選項時纔會顯示,因此某些複選框需要從需求中排除。 還有一個需要填寫的字段(invoice_number),它始終對其進行驗證並始終有效。

單選按鈕:

<input name="reloaded" id="reloaded" type="radio" value="yes" onClick="Q1(this.value);" /> Yes</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <label><input name="reloaded" id="reloaded" type="radio" value="no" onClick="Q1(this.value);" /> 

複選框被除的ID /名稱都一樣

<input name="Q1-A" id="Q1-A" type="checkbox" value="yes" /> 

需要文本框中:

<input class="field size5" type="text" name="invoice_number" id="invoice_number" placeholder="Required! - 'RA' for Warranty Jobs" /> 

我相信,我有由於缺乏知識而過於複雜,但我無法想到我出錯的地方。

(投稿經由onsubmit="return validate(this);"存在的)

+0

顯示完整的html – sunysen

+0

我已更新顯示輸入html,Q1函數只是顯示並隱藏了div中的複選框。 – Tarquin

+0

你可以使用jQuery嗎? –

回答

0

以下代碼是我的最終結果和它的工作原理;

   function validate(form) { 
       var e = form.elements; 

       if(document.getElementById('RL-Y').checked) { 
        if(!e['Q1-A'].checked || !e['Q1-B'].checked || !e['Q1-C'].checked || !e['Q1-D'].checked || !e['Q1-E'].checked || !e['Q1-G'].checked || !e['Gen-A'].checked || !e['Gen-B'].checked) { 
        alert('You Must complete the Checklist!'); 
        return false; 
        } 
        if(!e['invoice_number'].value) { 
        alert('Invoice Number is REQUIRED!'); 
        return false; 
        } 
        return true; 

       } else if(document.getElementById('RL-N').checked) { 
        if(!e['Gen-A'].checked || !e['Gen-B'].checked || !e['Q2-A'].checked) { 
        alert('You Must complete the Checklist!'); 
        return false; 
        } 
        if(!e['invoice_number'].value) { 
        alert('Invoice Number is REQUIRED!'); 
        return false; 
        } 
        return true; 

       } else { 
       alert('You must indicate if you Reloaded the OS!'); 
       return false; 
       } 
      }