窗體與兩節 - Javascript驗證

Question

我有一個窗體（下）與兩節。每個部分都包含自己的字段。我需要確保至少有一個部分是完全填寫用戶可以提交表單之前。因此，如果在第1部分中輸入用戶電子郵件字段，則還必須填寫首選顏色，而第2部分現在是可選的。

同樣，如果第2部分輸入了用戶ID，那麼性別也應該被檢查。現在第1部分現在是可選的。我該怎麼做呢？下面我的JavaScript邏輯是錯誤的。

提交表格 - 有兩個部分。

<script> 
    function validate() 
{ 
    if ((document.frm.userID.value == "" && document.frm.UserEmail.value == "")) 
    { 
     if (document.frm.userID.value != "" && document.frm.UserEmail.value == "" || document.frm.userID.value == "" && document.frm.UserEmail.value != "") 
     { 
      return true; 
     }else 
     { 
      return false; 
     } 
    } 
    return(true); 
} 
</script> 
<form action="#" id="frm" method="post" name="frm" onsubmit="return(validate())"> 

--------- Section 1 ----------- 
    User Email*: 
    <input type="text" name="UserEmail">   

    <p><b>Preferred Color*:</b></p> 
    <input type="radio" name="preferred_color" value="Red" /> Red<br /> 
    <input type="radio" name="preferred_color" value="Blue" /> Blue<br /> 
    <input type="radio" name="preferred_color" value="Green" /> Green<br /> 


--------- Section 2 ----------- 
USER ID *: 
<input type="text" name="userID" value=""> 
GENDER*: 
<input type="radio" name="sex" value="male">Male<br> 
<input type="radio" name="sex" value="female">Female 

<input type="submit" value="submit"> 

</form> 

Answer 1

，請返回true，如果（在第1節所有輸入有一個值）或（第2節中所有的輸入有一個值）

function validate() 
{ 
    var result = (document.frm.UserEmail.value != "" && document.frm.preferred_color.value != "") 
     || (document.frm.userID.value != "" && document.frm.sex.value != ""); 
    return result; 
} 

UPDATE：如果你想有一個更靈活的解決方案，嘗試使用下面的代碼（它需要jQuery）。這樣，如果您將任何新輸入添加到任一節中，它們將自動通過驗證功能進行檢查。基本上，它所做的是循環遍歷section1和section2中的所有表單字段，並確保每個字段都有一個值。另請注意，增加了<div id="section1">和<div id="section2">。

<form action="#" id="frm" method="post" name="frm" onsubmit="return validate();"> 
    <div id="section1"> 
     User Email*: <input type="text" name="UserEmail" /><br /> 
     Preferred Color*:<br /> 

     <label><input type="radio" name="preferred_color" value="Blue" />Blue</label><br /> 
     <label><input type="radio" name="preferred_color" value="Green" />Green</label> 

     <!--Newly Added requirement if and only if Green is selected--> 
     <input type="checkbox" name="preferred_color_green" value="blackShoes">Green goes w black<br> 
     <input type="checkbox" name="preferred_color_green" value="favoriteColor">its my favorite color 

    </div> 
    <br /> 
    <br /> 
    <div id="section2"> 
     USER ID *: 
     <input type="text" name="userID" value="" /><br /> 
     GENDER*:<br /> 
     <label><input type="radio" name="sex" value="male" />Male</label><br /> 
     <label><input type="radio" name="sex" value="female" />Female</label> 

     <!--Newly Added requirement if and only if female is selected--> 
     <input type="checkbox" name="vehicle" value="Bike">buy a female bike<br> 
     <input type="checkbox" name="vehicle" value="Car">buy a smaller car 


    </div> 
    <input type="submit" value="submit" /> 
</form> 

和JavaScript：

function validate() { 
    // Valid if all fields in section1 OR section2 are entered 
    return validateSection("section1") || validateSection("section2"); 
} 
function validateSection(section) { 
    var inputs = $("#" + section + " input, #" + section + " textarea, #" + section + " select"); 

    // Make sure each field has a value 
    for (var i = 0; i < inputs.length; i++) { 
     var input = inputs[i]; 
     if (input.type == "button" || input.type == "submit" || input.type == "checkbox") { 
      // Ignore buttons and check boxes 
      continue; 
     } 
     if (input.type == "radio") { 
      // Handle radio buttons specially. 
      // They will always have a value, just make sure one of them is checked. 
      var items = document.frm.elements[input.name]; 
      var selected = false; 
      for(var j = 0; j < items.length; j++) { 
       if (items[j].checked) { 
        selected = true; 
        break; 
       } 
      } 
      if (!selected) { 
       return false; 
      } 
     } else if (input.value == "") { 
      return false; 
     } 
    } 
    return true; 
} 

小提琴：http://jsfiddle.net/5jsfu1uc/6/