If input found open container, otherwise do nothing

Question

I am currently working on a bit of code where if an invalid input is found then open the container otherwise do nothing at all.

I have some of the logic down, but the click event for the container always opens and closes regardless of the attribute value am trying to use to prevent this. I want to only trigger the click event if the container isn't already open.

I am using bootstrap for the collapse functionality.

$(document).on("click", ".test", function() {
  var inputs = document.querySelectorAll('form div input');
  [].forEach.call(inputs, function(input) {
    input.addEventListener('invalid', function(e) {
      var collaspe = $(this).closest('.panel').find('.panel-heading .collapse-icon').attr('aria-expanded');
      console.log(collaspe);
      if (!collaspe) {
        $(this).closest('.panel').find('img').trigger("click");
      } else {
        alert("Do Nothing");
      }
    });
  });
});

.container {
  width: 75%;
}
.panel-heading {
  background-color: #D9DBDE;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 0;
}
.panel-title {
  font-size: 21px;
  display: block;
  width: 100%;
  color: #4F5858;
  line-height: 1.3;
  font-weight: normal;
}
.collapse-icon {
  float: right;
}
.fieldpos {
  margin-left: 0px;
  width: 60%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<form action="/update" id="formwrite">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel">
      <div class="panel-heading" role="tab" id="headingOne">
        <h4 class="panel-title va-middle">Account Settings
      <img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeOne" aria-expanded="true" aria-controls="collaspeOne">
      </h4>
      </div>
      <div id="collaspeOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-default">
          <div class="row fieldpos">
            <fieldset class="form-group textwide">
              <label for="email">Email</label>
              <input type="email" class="form-control" id="email" placeholder="Enter Email" required>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-heading" role="tab" id="headingTwo">
        <h4 class="panel-title va-middle">Other Settings
        <img src='../images/colopen.svg' data-swap='../images/coll.svg' class="panel-icon collapse-icon" role="button" data-toggle="collapse" data-parent="#accordion" href="#collaspeTwo" aria-expanded="true" aria-controls="collaspeTwo">
        </h4>
      </div>
      <div id="collaspeTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-default">
          <div class="row fieldpos">
            <fieldset class="form-group textwide">
              <label for="group">Test</label>
              <input type="text" class="form-control " id="group" placeholder="test" required>
            </fieldset>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-success form-control savechanges">Save Changes</button>
  <button class="btn btn-success form-control test">Call Function</button>
</form>
</body>

JSfiddle here

Any suggestions as to what am missing?

Use this condition `if (collaspe == "false")` OR `if (collaspe == "true")`. Because the atrribute is a string not a boolean value. — Akshay, Sep 27 '16 at 09:38
Possible duplicate of [HTML5 required, open collapse and focus required element if empty](http://stackoverflow.com/questions/39701894/html5-required-open-collapse-and-focus-required-element-if-empty) — CBroe, Sep 27 '16 at 09:44
@Akshay Tried setting `if (collaspe == "true")` it just opens, then closes and then nothing happens already tried that — Studento919, Sep 27 '16 at 09:46

score 0 · Accepted Answer · answered Sep 27 '16 at 13:05

The following was able to accomplish what I needed I simply added in another argument and looked for the in class to determine if the trigger event should run or not.

$(document).on("click", ".savechanges", function() {
  $("input[required]").on("invalid", function(event) {
    var collaspe = $(this).closest('.collapse').hasClass("in");
    console.log(collaspe);
    if (!collaspe) {
      $(this).closest('.panel').find('img').trigger("click");
    } else if (collaspe) {
      $("input[required]").off();
    } else {
      console.log("Do Nothing");
      return false;
    }
  });
});

If input found open container, otherwise do nothing

1 Answers1