Question

我试图让页面专注于一个空元素，如果它在一个折叠的div中，它将打开该元素并专注于必填字段为空。我正在使用bootstrap来实现折叠功能。

目前，如果尝试提交表单并且有一个空的必填字段，它将不会提交，但没有说明原因。

我不确定如何打开折叠元素并在尝试提交表单时将所需字段对焦为空。

代码段中的JavaScript适用于JQuery UI手风琴，我试图让它用于引导程序折叠功能。

以下是html＆amp; CSS

＆＃13;

// save the accordion in a variable as you'll need it later
$collaspe = $("#accordion");

// when the submit is clicked
$("#formwrite input[type='submit']").on("click", function(event) {

  // traverse all the required elements looking for an empty one
  $("#formwrite input[required='required']").each(function() {

    // if the value is empty, that means that is invalid
    if ($(this).val() == "") {

      // find the index of the closest h3 (divide by 2 because jQuery UI accordion goes in pairs h3-div. A bit hacky, sorry)
      var item = $(this).closest(".ui-accordion-content").prev().index() / 2;

      // open that accordion section that contains the required field
      $collaspe.accordion("option", "active", item);

      // stop scrolling through the required elements
      return false;
    }
  });
});

＆＃13;

.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%;
}

＆＃13;

<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>


<body>
  <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 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>
    <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 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>
    <button type="submit" class="btn btn-success form-control savechanges">Save Changes</button>
  </form>
</body>

＆＃13;

关于我如何做到这一点的任何建议，我已经阅读了一些像我自己的问题，例如this where I have tried the JS in my own，但是已经能够根据需要使用它。

Answer 1

在输入中添加一个侦听器，使其无效，然后告诉父容器打开。

var inputs = document.querySelectorAll('form div input');

[].forEach.call(inputs, function(input) {
  input.addEventListener('invalid',function(e){
    input.parentNode.style.display = 'block'
  });
});

div {
  display: none;
}

<form>
  <div>
    <input name="one" type="text" required />
  </div>
  <div>
    <input name="two" type="text" required />
  </div>
  <input type="submit" value="submit" />
</form>

Answer 2

为什么不使用一些好的ol＆＃39;自己编码;）

我已经更新了css并添加了一些JS。我希望它符合您的需求。

CSS：

.panel-collapse {
  margin-top: 20px;
  max-height: 200px;
  -webkit-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  overflow-y: hidden;
  display: block;
}

.collapse {
  max-height:0;
  display:block;
  margin: 0 !important;
}

JS：

$(document).ready(function(){
    var validated = false,
        inputC = 0,
        that;
  jQuery.fn.extend({
    valVal: function() {
      return $(this).each(function() {
        var input = $(this);
        inputC++;
        if(!$.trim(input.val())){
            input.closest(".collapse").removeClass("collapse");
        }
      });
    }
  });

    $(".savechanges").on("click", function(){
    that = $(this);
    console.log(that.parent());
    inputC = 0;
    $(".panel-collapse").addClass("collapse");
    that.parent().parent().find("input").valVal();
    var collapse = $(".collapse");
    if(collapse.length==inputC){
        validated = true;
      console.log("yess");
      //Do an AJAX request to server.
    }else{
      console.log("not quite correct yet..");
      //Just for the sample, has no use (yet) in this piece of code
    }

  })
    $(".panel-heading").on("click", function(){
    that = $(this);
    that.parent().find(".panel-collapse").toggleClass("collapse");
    that.parent().find("input").focus();
  })
})

这是一个有效的JSFiddle

祝你好运！

如果为空，则需要HTML5，打开折叠和焦点必需元素

2 个答案: