Question

我正在构建一个表单，其中有某些字段是必需的，但取决于先前的选择，表格由data-validate =“required;”表示属性。我得到了这个工作正常，直到我达到嵌套条件，然后没有任何反应。

我已经设置了每个操作来更改页面的背景颜色，就像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--}

感谢您的协助。

Answer 1

打赌问题就在这里

// this line should check if affiliatedVal does not have class collapsed but it doesn't work
if(!$(affiliatedVal).hasClass('collapsed')) {

affiliatedVal是一个值（文本），因此没有选择器来检查hasClass，在那里使用affiliatedInput而不是

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

使用

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

Jquery中的嵌套条件不起作用

1 个答案: