表单包含两个部分-Javascript验证

我有一个表格（下面）有两个部分。每个部分都包含自己的字段。在用户提交表单之前，我需要确保至少有一个部分填写完整。因此，如果在第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>

函数验证（）
{ 
如果（（document.frm.userID.value==”&&document.frm.UserEmail.value==”）
{ 
如果（document.frm.userID.value！=“”&document.frm.UserEmail.value=“”| | document.frm.userID.value=“”&document.frm.UserEmail.value！=“”）
{ 
返回true；
}否则
{ 
返回false；
}  
} 
返回（真）；
}
---------第一节-----------
用户电子邮件*：
首选颜色*：

红色

蓝色

绿色

---------第二节-----------
用户ID*：
性别*：
男性

女性

如果（第1节中的所有输入都有值）或（第2节中的所有输入都有值），请尝试返回true

更新：如果您想要一个更具可伸缩性的解决方案，请尝试使用下面的代码（它需要jQuery）。这样，如果向任一部分添加任何新输入，验证功能将自动检查这些输入。基本上，它所做的是循环遍历

section1

和

section2

中的所有表单字段，并确保每个字段都有一个值。还要注意添加了

和

用户电子邮件*：

首选颜色*：

蓝色

绿色
绿色变为黑色

这是我最喜欢的颜色




用户ID*：


性别*：

男性

女性
买一辆女性自行车

买一辆小一点的车

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

函数验证（）{
//如果输入了第1节或第2节中的所有字段，则有效
返回validateSection（“第1节”）| | validateSection（“第2节”）；
}
函数validateSection（部分）{
变量输入=$（“#“+节+”输入，#“+节+”文本区域，#“+节+”选择”）；
//确保每个字段都有一个值
对于（变量i=0；i

---

Fiddle:

我尝试了你的更新版本，但似乎什么都没做。看起来是一个不错的解决方案，因为它可以解决添加新字段时可能出现的问题。另外，我们如何让用户知道缺少字段。或者在缺少的输入旁边添加一些文本。--更新---它在Chrome浏览器中不起作用：（在IE浏览器中，它验证UserEmail和userID。它忽略单选按钮和复选框。奇怪的是，它在Chrome浏览器中不起作用-它对我起作用。我已将代码更新为在IE 11中工作。看起来像

document.frm[input.name].value

在IE中不起作用。另请参见我的小提琴。它现在与您所做的更改一起工作。是否有方法提醒用户缺少哪个字段？再次感谢。有多种方法可以做到这一点；这取决于UI的外观。常见的方法是在所需字段后显示错误消息，显示错误信息Summary靠近submit按钮，或显示

警报（）

。在我更新的小提琴中，我给出了在必填字段后显示消息的示例。

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

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