Javascript HTML5必需，打开折叠并聚焦必需元素（如果为空）

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

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

如果试图提交表单时必填字段为空，我不确定如何打开折叠的元素并聚焦必填字段

代码段中的JavaScript是针对jQueryUIAccordion的，我正试图让它用于引导折叠功能

下面是html和CSS

//将手风琴保存在变量中，以备以后使用
$collaspe=$（“手风琴”）；
//单击提交时
$（“#formwrite input[type='submit']”）。单击（“click”，函数（事件）{
//遍历所有必需的元素以查找空元素
$（“#formwrite输入[required='required']”）。每个（函数（）{
//如果该值为空，则表示该值无效
if（$（this）.val（）==“”）{
//找到最接近的h3的索引（除以2，因为jQuery UI accordion成对出现在h3-div中。抱歉，有点粗糙）
var item=$（this）.closest（“.ui accordion content”）.prev（）.index（）/2；
//打开包含必填字段的手风琴部分
$collaspe.accordion（“选项”，“活动”，项目）；
//停止滚动所需的元素
返回false；
}
});
});
.container{
宽度：75%；
}
.小组标题{
背景色：#D9DBDE；
填充：20px；
边缘底部：10px；
边界半径：0；
}
.小组标题{
字号：21px；
显示：块；
宽度：100%；
颜色：#4F5858；
线高：1.3；
字体大小：正常；
}
.折叠图标{
浮动：对；
}
.fieldpos{
左边距：0px；
宽度：60%；
}

帐户设置
电子邮件
其他设置
试验
保存更改
为无效的输入添加侦听器，然后告诉父容器打开


var inputs=document.querySelectorAll（'form div input'）；
[]forEach.call（输入，函数（输入）{
input.addEventListener（'invalid'，函数（e）{
input.parentNode.style.display='block'
});
});
div{
显示：无；
}
为无效的输入添加侦听器，然后告诉父容器打开


var inputs=document.querySelectorAll（'form div input'）；
[]forEach.call（输入，函数（输入）{
input.addEventListener（'invalid'，函数（e）{
input.parentNode.style.display='block'
});
});
div{
显示：无；
}
为什么不自己使用一些好的ol'编码；）

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

CSS:

JS:

这是一份工作报告

祝你好运
 为什么不自己使用一些好的ol'编码；）

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

CSS:

JS:

这是一份工作报告

祝你好运
 您是否对
javascript
进行了一些编码？在其他
.panel
元素中有
.panel
元素。这是一个错误吗？@Vikrant现在发布，我试图使用我自己链接的另一个问题的代码，但不断出现错误，以尝试至少得到一些符合我需要的东西。@Evocrome据我所知不是这样吗？首先，在问问题之前，消除所有可能与问题无关的明显错误。例如，控制台中报告了许多错误，在我们开始讨论您提出的问题之前，需要解决这些错误。另外，将您的代码减少到演示问题所需的绝对最小数量（有关此方面的指导，请参阅：“”）。您是否对
javascript
进行了一些编码？在其他
.panel
元素中有
.panel
元素。这是一个错误吗？@Vikrant现在发布，我试图使用我自己链接的另一个问题的代码，但不断出现错误，以尝试至少得到一些符合我需要的东西。@Evocrome据我所知不是这样吗？首先，在问问题之前，消除所有可能与问题无关的明显错误。例如，控制台中报告了许多错误，在我们开始讨论您提出的问题之前，需要解决这些错误。此外，请将代码减少到演示问题所需的绝对最小数量（请参阅“”，以获取有关此问题的指导）。尝试添加触发器事件并不断出现以下错误：名称为“”的
无效表单控件不可聚焦。
例如
$（this）.closest（.collapse icon”）.trigger（“单击”）。尝试添加触发器事件并不断收到以下错误：名称为“”的
无效表单控件不可聚焦。
例如
$（此）。最近（.collapse icon”）。触发器（“单击”）。
.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;
}

$(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();
  })
})