formvalidation.io验证不与knockout控制流绑定一起使用

时间:2015-12-05 18:21:48

标签: javascript jquery knockout.js formvalidation.io

我正在研究一个项目,我遇到了这个用于验证的验证库。它工作正常,直到我开始使用它与敲除控制流绑定。它的事件没有注册ko使用ko绑定的模板。任何帮助,将不胜感激。感谢。

$('#firewallRuleForm')
            .find('[name="selectFirewallRule"]')
            .change(function(e){
             $('#firewallRuleForm').on('init.field.fv', function(e, data) {
                                            // data.fv      --> The FormValidation instance
                                            // data.field   --> The field name
                                            // data.element --> The field element

                                            var $parent = data.element.parents('.form-group'),
                                                $icon   = $parent.find('.form-control-feedback[data-fv-icon-for="' + data.field + '"]');

                                            // You can retrieve the icon element by
                                            // $icon = data.element.data('fv.icon');

                                            $icon.on('click.clearing', function() {
                                                // Check if the field is valid or not via the icon class
                                                if ($icon.hasClass('glyphicon-remove')) {
                                                    // Clear the field
                                                    data.fv.resetField(data.element);
                                                }
                                            });
                                        }).formValidation({
                          framework: 'bootstrap',

                          icon:{
                            valid: 'glyphicon glyphicon-ok',
                            invalid: 'glyphicon glyphicon-remove',
                            validating: 'glyphicon glyphicon-refresh'
                          },
                          fields: {
                              selectFirewallRule: {
                                  validators: {
                                      notEmpty: {
                                          message: 'Firewall Rule Type is required'
                                      }

                                  }
                              },
                              firewallRuleName:{

                                validators: {
                                    notEmpty: {
                                        message: 'The Firewall Rule name is required'
                                    }

                                }
                            },
                           setPacketWrite:{

                             validators: {
                                 notEmpty: {
                                     message: 'The Packet write is required'
                                 }

                             }
                         }



                          }
                        })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<form id="firewallRuleForm" class="form-horizontal " data-bind="with: formModel">

        <div class="form-group">
            <label class="col-xs-2 control-label">Rule type</label>
            <div class="col-xs-4">
               <select name="selectFirewallRule" class="form-control select2-select" style="width:208px" data-bind="value: selectedFirewallRuleType, valueAllowUnset: true, select2: {}">
                 <option value="">Choose Rule type</option>
                 <option value="Standard">Standard</option>
                 <option value="Rate limit">Rate limit</option>
                 <option value="Packet Rewrite">Packet Rewrite</option>
                 <option value="Rate limit queue Bypass">Rate limit queue Bypass</option>
                 <option value="Wifi">Wifi</option>
               </select>
            </div>
        </div>
<!-- ko if: (selectedFirewallRuleType() == 'Packet Rewrite' || selectedFirewallRuleType() == 'Standard' || selectedFirewallRuleType() == 'Wifi') -->
      <div id="standardRuleForm">

        <div class="form-group" >
           <label class="col-xs-2 control-label">Rule name</label>
           <div class="col-xs-4 ">
              <input type="text" class="form-control" name="firewallRuleName" placeholder="Enter the name of the rule" data-bind="textInput: ruleName"/>
           </div>
           <!-- ko if: (selectedFirewallRuleType() !== 'Packet Rewrite' ) -->
           <div class="col-xs-offset-2 col-xs-2">
                <div class="checkbox">
                  <label><input type="checkbox">Log Matches? </label>
                </div>
           </div>
           <!-- /ko -->
        </div>
        <!-- ko if: (selectedFirewallRuleType() == 'Packet Rewrite') -->
        <div class="form-group">
                            <label class="col-xs-2 control-label">Set</label>
                            <div class="col-xs-4">
                            <select class="form-control select2-select" name="setPacketWrite" data-bind="value : packetRewriteSet , valueAllowUnset: true, select2: {}">
                                  <option value="">Choose packet</option>
                                  <option value="MSS">MSS</option>
                                  <option value="WSCALE">WSCALE</option>

                              </select>
                            </div>
                        </div>
        <!-- /ko -->
如果选择了FirewallRuleType,则插件对ko后的代码不起作用。任何帮助,将不胜感激。提前谢谢。

0 个答案:

没有答案