隐藏下拉选择的必填字段验证器

Question

我有下面的代码，所以当访问者选择“国内”时，国内会出现一个隐藏的下拉选择。如果访问者选择“学生”，则会出现另一个隐藏的下拉选项。要查看它是如何工作的，您可以check it out here 我还使用了一个 jquery 验证器，所以如果没有选择一个字段或下拉菜单，那么它会弹出一个窗口。但是因为只能选择一个隐藏字段（与学生或家庭相关的字段），所以这个验证器总是会弹出。如果没有选择这些隐藏的下拉菜单的选项，我该怎么做才能使弹出窗口起作用。

我使用的 jquery 验证器如下：

<script>


function formCheck(formobj){

var x=document.forms["form1"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");

var fieldRequired = Array("reason1",  "reason2");
// Enter field description to appear in the dialog box



var fieldDescription = Array("Reason 1",  "Reason 2");

// dialog message
var alertMsg = "Please complete all fields and enter a valid email address";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
    var obj = formobj.elements[fieldRequired[i]];
    if (obj){
        switch(obj.type){
        case "select-one":
            if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].value == ""){
                alertMsg += "  " + "\n";
            }
            break;
        case "select-multiple":
            if (obj.selectedIndex == -1){
                alertMsg += "  " + "\n";
            }
            break;

        case "text":
            case "textarea":
            if (obj.value == "" || obj.value == null || atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
                alertMsg += "  " +  "\n";
            }
            break;

        default:
        }
        if (obj.type == undefined){
            var blnchecked = false;
            for (var j = 0; j < obj.length; j++){
                if (obj[j].checked){
                    blnchecked = true;
                }
            }
            if (!blnchecked){
                alertMsg += "  "  + "\n";
            }
        }
    }
}

if (alertMsg.length == l_Msg){
    return true;
}else{
    alert(alertMsg);
    return false;
}


}
// -->
</script>

html部分的代码如下：

<script type="text/javascript">

    /* <![CDATA[ */
    $(document).ready(function(){

        $("#storagetype").change(function(){

            if ($(this).val() == "student" ) {

                $("#hidestudent").slideDown("fast"); //Slide Down Effect

            } else {

                $("#hidestudent").slideUp("fast");  //Slide Up Effect

            }
        });


        $("#storagetype").change(function(){

            if ($(this).val() == "domestic" ) {

                $("#hidedomestic").slideDown("fast"); //Slide Down Effect

            } else {

                $("#hidedomestic").slideUp("fast"); //Slide Up Effect

            }
        });
    });

    /* ]]> */

    </script>


    <div class="contactform">
    <div class="forminside">
    <div id="apDiv1">

    <form id="form1" name="form1" method="get" form action="page2.php"  onsubmit="return formCheck(this); "> 

    <div class="detailscolumn1"><h3></h3>
<br/>
<br/>

   <div class="storagetype">
            <div class="input select">
             <div class="labelfortype">
      <label for="storagetype">    select your business type</label>    </div><!--end of labelfortype class-->
                    <select name="storagetype" id="storagetype">
                <option value="">(select)</option>
                <option value="domestic">domestic</option>
                <option value="student">student</option>
                </select>
        </div>
       </div><!--end of storagetype class-->

     <div class="hiddenreason">   
        <div class="hide" id="hidedomestic"><!-- this select box will be hidden at first -->

            <div class="input select">
 <div class="labelforreason"> <label for="reasonstorage">reason for business</label></div><!--end of labelfortype class-->

                <select name="reason2" id="reason1">
                    <option value="">(select)</option>
                    <option value="moving">moving</option>
                    <option value="diy/home improvements">diy/home improvements</option>
                    <option value="decluttering">decluttering</option>
                    <option value="other">other</option>
                </select>
            </div>
        </div>
       </div><!--end of hidden reason--> 

      <div class="hiddenreason">  
       <div class="hide" id="hidestudent"><!-- this select box will be hidden at first -->
            <div class="input select">
  <div class="labelforreason"> <label for="reasonstorage">reason for business</label></div><!--end of labelfortype class-->

                <select name="reason3" id="reason2">
                    <option value="">(select)</option>
                    <option value="holiday">holiday</option>
                    <option value="moving">moving</option>
                    <option value="other">other</option>

                </select>
            </div>
        </div>
     </div><!--end of hidden reason-->    






    </div><!--end of detailscolumn1-->



    </form></div>

    </div><!--end of forminside-->
    </div><!--end of contactform-->

在此先感谢

Answer 1

我建议你禁用像这样隐藏的选择：

$("#storagetype").change(function(){
    if ($(this).val() == "student" ) {
        $("#hidestudent").slideDown("fast"); //Slide Down Effect
        $("#reason2").prop('disabled', false);
    } else {
        $("#hidestudent").slideUp("fast");  //Slide Up Effect
        $("#reason2").prop('disabled', true);
    }
});

（同样适用于另一个）

...然后在您进行验证时检查输入的禁用状态（老实说，我无法从您的 js 代码中找出您正在执行此操作的位置，所以我在这里给出一个一般示例）：

if ($('#test').prop('disabled') == true) {
    // do stuff if true
} else {
    // do stuff if false
}

已编辑：您的 js 代码一定有内在错误（抱歉，我无法弄清楚究竟是什么）但是当我测试它时，它总是返回错误消息，即使我删除隐藏隐藏 div 的行并允许它们显示，然后为所有选择值。

也没有电子邮件字段（在您的 js 代码中指定和检查 - 我添加了它），也没有提交按钮（也添加了）。

在这里查看我的测试：http://jsfiddle.net/Pk6SP/