需要HTML5，打開摺疊和焦點所需的元素如果爲空

我想讓頁面專注於一個空元素，如果它在一個摺疊的div內，它將打開該元素並專注於所需的空字段。我正在使用引導來實現崩潰功能。需要HTML5，打開摺疊和焦點所需的元素如果爲空

此刻，如果表單試圖提交，並且有一個空的必填字段，它不會提交，但沒有什麼可以說明原因。

我不確定如何打開摺疊的元素，並在表單嘗試提交時如果爲空則關注所需的字段。

片段中的JavaScript用於JQuery UI手風琴，其中正試圖讓它適用於引導程序摺疊功能。

下面是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 
 
\t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t </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 
 
\t \t \t \t \t \t \t \t <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"> 
 
\t \t \t \t \t \t \t \t </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>

我如何能做到這一點的任何建議，我看過像我自己，如this where I have tried the JS in my own其他幾個問題，但已能夠根據需要進行工作。

來源

2016-09-26 Studento919

你是否已經對'javascript'做了一些編碼？發佈它 – Vikrant

其他'.panel'元素內有'.panel'元素。這是一個錯誤嗎？ – Evochrome

@Vikrant現在發佈，我試圖使用我自己鏈接的其他問題的代碼，但不斷收到錯誤嘗試，至少得到我需要的東西。 – Studento919

爲您的輸入添加一個監聽器，使其無效，然後告訴父容器打開。

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>

來源

2016-09-26 13:10:01

嘗試添加一個觸發事件，並繼續收到以下錯誤：'名稱='的無效表單控件不可聚焦.'''（this）.closest（「。collapse-icon」）。trigger（「click」）;在無效事件監聽器中。 – Studento919

爲什麼不使用一些好的醇」編碼自己;）

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

祝你好運！

來源

2016-09-26 20:08:50 Evochrome

需要HTML5，打開摺疊和焦點所需的元素如果爲空

回答

相關問題