Question

您好。我有一个由jqueryvalidate.js验证的表单。我有一个下拉菜单，当我选择“图书馆资源”时菜单会有所不同，因为我需要选择另一个隐藏的下拉菜单。

问题是，当我没有选择其他菜单时没有显示另一个下拉菜单.. 所需的规则仍然实现..因此除了显示另一个下拉菜单的表单外，无法提交表单。

有人可以帮助我吗？

这是我的代码：视图（JS）：

<script type="text/javascript">

function showbook()
{       
    var domObj1 = document.getElementById('emptybox');
    var domObj2 = document.getElementById('showupbox');

    if(domObj1.style.display =='none')
    {
        domObj1.style.display = 'block';
        domObj2.style.display = 'none';
    }
    else
    {
        domObj1.style.display = 'none';
        domObj2.style.display = 'block';
    }

}
function closebook()
{
    var domObj1 = document.getElementById('emptybox');
    var domObj2 = document.getElementById('showupbox');

    if(domObj1.style.display =='none')
    {
        domObj1.style.display = 'block';
        domObj2.style.display = 'none';
    }
}

function showhidebook()
{
    console.log($('#CategoryAdviceSelect').val());
    if($('#CategoryAdviceSelect').val() == 1)
    {
        showbook();
    }
    else{
    closebook();
    }
}

我的验证规则：

<script>

$().ready(function() {

    $("#feedback_form").validate({
    ignore: "input:hidden:not(input:hidden.required)",
    rules: {
        CategoryAdviceSelect:"required",
        Subject:"required",
        Advice:"required",
        BookSelect:"required"

    },
    messages: {
        CategoryAdviceSelect:"Please select one of category advice",
        Subject:"This field is required",
        Advice:"This field is required",
        BookSelect:"This field is required"
    },
    errorElement: "span",
    highlight: function(element) {
        $(element).parent().addClass("help-block");
    },
    unhighlight: function(element) {
        $(element).parent().removeClass("help-block");
    }
});
});


</script>

我的html视图

<div class="row-fluid ">

<div class="box">
<hr>
<div class="paragraph">
     <p>For enquiries about our services, write to: helpdesk@library.binus.ac.id.</p>

    <p>You may also reach us at our helpdesk number 62-21-5350660. We value your feedback. Please fill in the form below, and help us improve our services.</p>

    <p>Talk to me here
        <a href = 'ymsgr:sendim?me_lieza93'>
          <img src="http://opi.yahoo.com/online?u=me_lieza93&m=g&t=1" border=0>
        </a>
    </p>
</div>

        <!--START FORM-->
        <form id="feedback_form" name="feedback_form" action="<?php echo base_url();?>feedback/feedback/insert_to_db" method="post" class="form-horizontal" novalidate="novalidate">

                 <div class="control-group">

                    <!--FEEDBACK TYPE-->

                        <label class="span2 control-label" >Feedback for</label>

                        <div class="controls with-tooltip"> 
                        <select  class="input-tooltip span5" tabindex="2" id="CategoryAdviceSelect" name="CategoryAdviceSelect" onchange="showhidebook();" >
                            <option value="" disabled selected>Choose Your Feedback For..</option>
                         <?php 
                            for($x = 0 ; $x < count($feedback) ; $x++) 
                            { ?> 
                                <option value="<?php echo $feedback[$x]['CategoryAdviceId']?>"><?php echo $feedback[$x]['CategoryAdviceName'] ?></option>
                            <?php 
                            } ?>
                        </select>
                        </div>  
                </div>

            <!--SUBJECT-->  
                <div class="control-group">
                    <label for="limiter" class="control-label">Subject</label>

                    <div class="controls">
                        <input type="text" class="span5" maxlength="50" id="Subject" name="Subject" placeholder="Type Your Feedback Subject.."  />
                        <p class="help-block"></p>
                    </div>                      
                </div>

            <div id="emptybox"></div>
            <!--CHOOSE BOOK-->  
            <div id="showupbox" style="display: none;">             
                <div class="control-group">
                    <label class="control-label">Choose Book</label>
                        <div class="controls">
                            <select  class="chzn-select span5" tabindex="2" id="BookSelect" name="BookSelect">
                                <option value="" disabled selected>Choose Your Feedback For..</option>
                             <?php 
                                for($y = 0 ; $y < count($booklist) ; $y++) 
                                { ?> 
                                    <option value="<?php echo $booklist[$y]['bi']?>"><?php echo $booklist[$y]['AssetTitle']?></option>
                                <?php 
                                } ?>
                            </select>
                        </div>
                    </div>
            </div>  
            <!--ADVICE-->   
                <div class="control-group">
                    <label for="limiter" class="control-label" >Suggestion</label>

                    <div class="controls">
                    <?php echo $this->ckeditor->editor("Advice",""); ?>;
                      </div>                        
                </div>

                <!--div class="alert alert-success">  
                      <a class="close" data-dismiss="alert">×</a>  
                      <strong>Success!</strong> Thanks for your feedback!   
                    </div--> 

                <div class="bton1">
                    <button class="btn btn-primary round" type="submit">Submit</button>
                    <button class="btn btn-primary round" type="refresh">Reset</button>
                    </div>
        </form> 
</div><!--END BOX-->

Answer 1

最后我可以解决这个问题..

<script>

$(document).ready(function() {


    for(var name in CKEDITOR.instances) {
        CKEDITOR.instances["Advice"].on("instanceReady", function() {
            // Set keyup event          
            this.document.on("keyup", updateValue);
            // Set paste event
            this.document.on("paste", updateValue);     
        }); 

        function updateValue() {
            CKEDITOR.instances["Advice"].updateElement(); 
            $('textarea').trigger('keyup');
        }
   } 

    $("#feedback_form").validate({
     ignore: 'input:hidden:not(input:hidden.required)',
        rules: {
            CategoryAdviceSelect:"required",
            Subject:"required",
            Advice:"required",
            BookSelect:{
                    required: function(element){
                    return $("#CategoryAdviceSelect").val()==1;
                }
            }
        },
        messages: {
            CategoryAdviceSelect:"Please select one of category advice",
            Subject:"This field is required",
            Advice:"This field is required",
            BookSelect:"This field is required",
        },
        errorElement: "span",
        errorPlacement: function (error, element) {
              if ($(element).attr('name') == 'Advice') {
                  $('#cke_Advice').after(error);
              } else {
                  element.after(error);
              }
          },
        highlight: function(element) {
            $(element).parent().addClass("help-block");
        },
        unhighlight: function(element) {
            $(element).parent().removeClass("help-block");
        }
    });
});

</script>

使用jqueryvalidate.js和ckeditor Codeigniter验证表单

1 个答案: