2013-10-19 58 views
0

我正在構建一個表單,其中有一些必需的字段,但取決於data-validate =「required」指示的形式中的先前選擇;屬性。我有這個工作正常,直到我到達嵌套條件,然後沒有任何反應。在jquery中嵌套的條件不起作用

我已經設置了每個動作來改變頁面的背景顏色,就像jQuery工作的視覺指示器一樣,​​所以我不需要每次都檢查代碼以獲取數據驗證屬性。

我的完整代碼如下 - 非工作代碼開始於評論開始嵌套條件,我試圖查看是否選擇了特定的複選框。選中時,該輸入的類將從「摺疊」變爲沒有類並出現新的一系列字段。

{!--validation script--} 
{if segment_2 =="request"} 
    <script type="text/javascript" src="{assets_url}js/livelyValidator_source.js"></script> 
    <link href="{assets_url}css/lively-validator.css" rel="stylesheet"> 

    <script type="text/javascript" > 
    $(document).ready(function() { 
     // check value of select.services_select 
     // then add data-validate="required;" to required fields 
     // if select changes remove from no longer required fields 
     // and add to the new fields 

     $('select#services_select').change(function() { 
      // assign the value to a variable, so we can do a conditional check 
      // set required attribute for sub forms 
      var selectVal = $('select#services_select :selected').val(); 

      if(selectVal =="school") { 
       // set school required fields here 
       $('#school_services input[name="organization_name"], #school_services input[name="city"], #school_services input[name="state"], #school_services input[name="country"], #school_services select[name="district_schools"]').attr("data-validate", "required;"); 
       $('body').css('background-color', '#c1c1c1'); 

       // remove data-validate="required;" from other options 
       $('#individual_services input, #district_services input').removeAttr("data-validate"); 

      } 
      else if(selectVal =="district") { 
       // set district required fields here 
       $('#district_services input[name="organization_name"], #district_services input[name="city"], #district_services input[name="state"], #district_services input[name="country"], #district_services select[multiple="multiple"]').attr("data-validate", "required;"); 
       // body class is temporary just to prove that conditional is working 
       $('body').css('background-color', 'yellow'); 

       // remove data-validate="required;" from other options 
       $('#individual_services input, #school_services input').removeAttr("data-validate"); 

      } 
      else if(selectVal =="teacher") { 
       // set teacher required fields here 
       $('#individual_services input[name="mailing_city"], #individual_services input[name="mailing_state"], #individual_services input[name="mailing_country"]').attr("data-validate", "required;"); 
       // body class is temporary just to prove that conditional is working 
       $('body').css('background-color', 'green'); 

       // remove data-validate="required;" from other options 
       $('#district_services input, #school_services input').removeAttr("data-validate"); 



      //begin nested conditional to check teacher affiliation 
       $('input[name="affiliated"]').change(function() { 
        // assign the value to a variable, so we can do a conditional check 
        var affiliatedVal = $('input[name="affiliated"]:checked').val(); 

        // set required attribute for sub fields       

        // set school required fields here 

        // this line should check if affiliatedVal does not have class collapsed but it doesn't work 
         if(!$(affiliatedVal).hasClass('collapsed')) { 
         $('#school_info input[name="city"], #school_info input[name="state"], #school_info input[name="country"]').attr("data-validate", "required;"); 
         $('body').css('background-color', 'pink'); 

        } 
        else if(affiliatedVal =="district") { 
         // set district required fields here 

        } 
        else if(affiliatedVal =="organization") { 
         // set organization required fields here 

        }// end nested conditional 
       }); 


      }// end outer conditional 
     }); 

    }); 

    $(document).ready(function(){ $('#request-services').livelyValidator(); }); 
    </script> 
{/if} 
{!-- end validation script--} 

感謝您的協助。

+1

1)用呈現的html創建一個jsfiddle.net。 2)使用console.log看看值是什麼 – mplungjan

回答

0

打賭這裏的問題奠定了

​​

affiliatedVal是一個值(文本),因此沒有選擇檢查hasClass着,在那裏使用affiliatedInput和代替

var affiliatedVal = $('input[name="affiliated"]:checked').val(); 

使用

var affiliatedInput = $('input[name="affiliated"]:checked'); 
var affiliatedVal = affiliatedInput.val(); 
+0

Basti,我剛剛嘗試了你發佈的內容,並沒有改變,仍然沒有添加data-validate屬性。 – CreateSean