vendredi 11 septembre 2015

Bootstrap formvalidation of checkboxes with hidden fields in bewteen

I'm using Bootstrap 3.3.2 with formvalidation.io. I have a group of checkboxes with hidden text fields after each checkbox that appear when their associated checkbox is checked. The text fields have notempty validation and the checkboxes have a validation for minimum of 1 checkbox checked. When I check one checkbox, it validates as green with the checkmark glyph. When I click a second checkbox, the checkmark glyph stays but it changes to a black color. How do I make the validation stay green with the additional checkmarks? Here is the HTML:

<form id="defaultForm" class="form-horizontal" role="form" method="post" action="">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="form-group">
        <label class="col-sm-3 control-label">Checkboxes With Hidden Fields</label>
        <div class="col-sm-7">
          <div class="checkbox">
            <label><input type="checkbox" id="checkboxes1" name="checkboxes[]" value="Checkbox 1">Checkbox 1</label>
          </div>
          <div class="form-group hidden" id="hidden_checkbox1_field">
            <div class="col-sm-12">
              <input type="text" class="form-control" id="checkbox1_field" name="checkbox1_field">
            </div>
          </div>
          <div class="checkbox">
            <label><input type="checkbox" id="checkboxes2" name="checkboxes[]" value="Checkbox 2">Checkbox 2</label>
          </div>
          <div class="form-group hidden" id="hidden_checkbox2_field">
            <div class="col-sm-12">
              <input type="text" class="form-control" id="checkbox2_field" name="checkbox2_field">
            </div>
          </div>
          <div class="checkbox">
            <label><input type="checkbox" id="checkboxes3" name="checkboxes[]" value="Checkbox 3">Checkbox 3</label>
          </div>
          <div class="form-group hidden" id="hidden_checkbox3_field">
            <div class="col-sm-12">
              <input type="text" class="form-control" id="checkbox3_field" name="checkbox3_field">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

and here is the validation/hidden field control JS:

$(document).ready(function() {
  $('#defaultForm').formValidation({
    framework: 'bootstrap',
    message: 'This value is not valid',
    icon: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
      "checkbox1_field": {
        validators: {
          notEmpty: {
            message: 'Field Required'
          }
        }
      },
      "checkbox2_field": {
        validators: {
          notEmpty: {
            message: 'Field Required'
          }
        }
      },
      "checkbox3_field": {
        validators: {
          notEmpty: {
            message: 'Field Required'
          }
        }
      },
      "checkboxes[]": {
        validators: {
          choice: {
              min: 1,
              message: 'Not enough checks'
          }
        }
      }
    }
  });

  $("#checkboxes1").change(function() {
    if ($(this).prop('checked')) {
      $("#hidden_checkbox1_field").removeClass("hidden");
      $('#defaultForm').formValidation('addField', 'checkbox1_field');
    } else {
      $("#hidden_checkbox1_field").addClass("hidden");
      $('#defaultForm').formValidation('resetField', 'checkbox1_field');
    }
  });

  $("#checkboxes2").change(function() {
    if ($(this).prop('checked')) {
      $("#hidden_checkbox2_field").removeClass("hidden");
      $('#defaultForm').formValidation('addField', 'checkbox2_field');
    } else {
      $("#hidden_checkbox2_field").addClass("hidden");
      $('#defaultForm').formValidation('resetField', 'checkbox2_field');
    }
  });

  $("#checkboxes3").change(function() {
    if ($(this).prop('checked')) {
      $("#hidden_checkbox3_field").removeClass("hidden");
      $('#defaultForm').formValidation('addField', 'checkbox3_field');
    } else {
      $("#hidden_checkbox3_field").addClass("hidden");
      $('#defaultForm').formValidation('resetField', 'checkbox3_field');
    }
  });
});




Aucun commentaire:

Enregistrer un commentaire