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

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

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

更新：如果你想要一个更具伸缩性的解决方案，请尝试使用下面的代码（它需要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/

表单有两个部分 - Javascript验证

1 个答案: