обязательный валидатор поля для скрытого выбора раскрывающегося списка

У меня есть код ниже, поэтому, когда посетитель выбирает «внутренний», для внутреннего появляется скрытый раскрывающийся список. Если посетитель выбирает «студент», вместо него появляется другой скрытый раскрывающийся список. Чтобы увидеть, как это работает, вы можете проверить это здесь. Я также использую валидатор 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-->

Спасибо заранее


person Denise    schedule 22.04.2014    source источник
comment
попробуйте добавить 0 в качестве значения, если оно не выбрано, его легче проверить, затем убедитесь, что вы отключили скрытый элемент select, наконец, проверьте значения, только если они не отключены...   -  person benomatis    schedule 22.04.2014
comment
@webeno спасибо за ваш комментарий. значение 0 уже есть. Проблема, с которой я сталкиваюсь, связана с валидатором выше. Ожидается, что будут выбраны оба скрытых раскрывающихся списка. Но выбрать можно только одну из них, либо относящуюся к домашней, либо к студенческой.   -  person Denise    schedule 22.04.2014
comment
ты зациклился на 0 там... посмотри 2-ю часть того, что я написал... ;)   -  person benomatis    schedule 22.04.2014
comment
спасибо за это @webeno Это имеет смысл. И как отключить выбор, когда он скрыт, и проверять значения, только если они не отключены? Я все еще изучаю этот предмет, поэтому очень ценю помощь.   -  person Denise    schedule 22.04.2014
comment
я дал ответ... причина, по которой я не хотел делать это раньше, заключается в том, что я не совсем понял в вашей функции js, где вы выполняете проверку на соответствие фактическим значениям выбора... я до сих пор не знаю, поэтому я добавил общий ответ на это... надеюсь, это поможет...   -  person benomatis    schedule 22.04.2014


Ответы (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/

person benomatis    schedule 22.04.2014