HTML5必需元素，open collapse and focus required元素为空

HTML5 required, open collapse and focus required element if empty

本文关键字：元素 required focus and open HTML5 collapse      更新时间：2023-09-26

我试图让页面专注于一个空元素，如果它在一个崩溃的div内，它将打开该元素，并专注于所需的字段是空的。我使用bootstrap的崩溃功能。

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

我不确定如何打开一个折叠的元素，并集中所需的字段，如果它是空的，当窗体试图提交。

代码片段中的JavaScript是用于JQuery UI accordion的，我试图让它为引导折叠功能工作。

JSFiddle

下面是html &CSS 

// 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;
    }
  });
});
.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>
<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>

关于如何做到这一点的任何建议，我已经阅读了一些像我自己这样的其他问题，比如我在自己的JS中尝试过，但是已经能够根据需要让它工作

为无效输入添加侦听器，然后告诉父容器打开。

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>

为什么不自己用一些好的代码呢;)

我已经更新了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

祝你好运!

相关文章：