1

This is my first question, so please be patient with me.

Im using a combination of jquery-validate and bootstrap wizard. Everything works fine except the ignore options. I need to use it for including hidden checkboxes. If you put just anything in the ignore option the whole bootstrap wizard isnt working anymore. But no errors are displayed.

See my fiddle: https://jsfiddle.net/danzhtyn/1/

HTML:

<div class="container">
<div id="content">
    <form name="ad" method="post" action="" id="ad_form" role="form" enctype="multipart/form-data">
        <div id="rootwizard">
            <div class="navbar">
              <div class="navbar-inner">
                <ul style="display: inline-block;">
                  <li><a href="#tab1" data-toggle="tab">Test 1</a></li>
                  <li><a href="#tab2" data-toggle="tab">Test 2</a></li>
                </ul>
              </div>
            </div>
            <div id="bar" class="progress">
              <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
            </div>
            <div class="tab-content">
              <div class="tab-pane" id="tab1">
                    <div class="form-group">
                      <label class="control-label required" for="ad_adtext">Anzeigentext</label>
                      <textarea id="ad_adtext" name="ad[adtext]" required="required" rows="15" class="form-control"></textarea>
                    </div>
              </div>
              <div class="tab-pane" id="tab2">
                    <div class="form-group">
                        <input type="checkbox" id="ad_categories_14" name="ad[categories][]" class="hidden" value="14" /> Computer
                        <input type="checkbox" id="ad_categories_14" name="ad[categories][]" class="hidden" value="15" /> Greets
                    </div>
              </div>
            </div>  
        </div>
    </form> 
</div>

JS: 

        $(document).ready(function() {

    var $form = $("#ad_form"),
    $validator = $form.validate({
        ignore: ":disabled",
      rules: {
        "ad[adtext]": {
          required: true
        },
        "ad[categories][]": {
          required: true,
          minlength: 1
        },
      },
      messages: {
        "ad[adtext]": "Dies ist ein Pflichtfeld! Bitte geben Sie einen Wert an.",
        "ad[category][]": "Dies ist ein Pflichtfeld! Bitte wählen Sie mindestens eine Rubrik aus.",
      }
    });
  $('#rootwizard').bootstrapWizard({
    onNext: function(tab, navigation, index) {

      var $valid = $form.valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }

    },
    onTabShow: function(tab, navigation, index) {

      var $total = navigation.find('li').length;
      var $current = index + 1;
      var $percent = ($current / $total) * 100;
      $('#rootwizard .progress-bar').css({
        width: $percent + '%'
      });

    },
    onTabChange: function(tab, navigation, index) {

      var $valid = $form.valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }

    }
  });
});

Remove ignore: ":disabled" and everything works fine.

Any suggestions?

Sparky
  • 98,165
  • 25
  • 199
  • 285
Gerrit
  • 11
  • 2
  • If everything works fine without `ignore`, then why do you need it? The jQuery Validate plugin is going to ignore everything that's visually hidden, by default. – Sparky Jul 21 '17 at 15:36
  • The `return false` inside your `onTabChange` is what's keeping your form from fully rendering, or "crashing" as you called it. – Sparky Jul 21 '17 at 15:38
  • Thanks @Sparky . Your comment got me on the right track. Validating hidden fields in combination with bootstrapWizard isnt a real option. Including hidden fields in valdition leads to a validation of the whole form just at the first step. I styled my "hidden" fields via `position: absolute; margin-left: -9999px;` and everything worked fine. – Gerrit Jul 24 '17 at 09:26

0 Answers0