簡體   English   中英

復選框和單選按鈕的Javascript驗證

[英]Javascript Validation of both Checkboxes and Radio Buttons

我正在做一份清單,每次工作人員每次填寫此特定表格時都需要填寫。 請注意,由於沒有足夠的時間進行研究,我仍在慢慢地掌握JS。

我做了一些研究,並結合了一些不同的驗證樣式,並提出了解決方案。

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);"提交)

以下代碼是我的最終結果,它可以工作;

                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;
              }
            }

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM