窗体与两节 - 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/