задължителен валидатор на поле за скрит избор от падащо меню

Имам кода по-долу, така че когато посетителят избере „домашно“, се появява скрита падаща селекция за местно. Ако посетителят избере „студент“, тогава вместо това се появява друга скрита селекция от падащо меню. За да видите как работи, можете да разгледате тук Аз също използвам 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 там... виж втората част от написаното от мен... ;)   -  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