Se requiere HTML5, abrir colapso y elemento requerido de foco si está vacío

Estoy tratando de hacer que la página se enfoque en un elemento vacío, si está dentro de un div colapsado, abrirá ese elemento y se enfocará en el campo requerido que estaba vacío. Estoy usando bootstrap para la funcionalidad de colapso.

Por el momento, si se intenta enviar el formulario y hay un campo obligatorio vacío, no se enviará, pero no hay nada que indique el motivo.

No estoy seguro de cómo abrir un elemento contraído y centrar el campo obligatorio si estaba vacío cuando se intentó enviar el formulario.

El JavaScript en el fragmento es para el acordeón de la interfaz de usuario de JQuery, donde estoy tratando de que funcione para la funcionalidad de colapsar el bootstrap.

JSFiddle

A continuación está el html y 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%; } 
     

Cualquier sugerencia sobre cómo podría hacer esto, he leído algunas otras preguntas como la mía, como esta, donde he probado el JS por mi cuenta , pero he podido hacerlo funcionar según sea necesario.

Agregue un oyente a sus entradas para que no sean válidas, luego dígale al contenedor principal que se abra.

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

¿Por qué no utilizar un poco de código bueno usted mismo;)

Actualicé el CSS y agregué algunos JS. Espero que se ajuste a tus necesidades.

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

Y aquí hay un JSFiddle que funciona

¡Buena suerte!