HTML5 필수, 비어있는 경우 접기 열기 및 포커스가 필요한 요소

빈 요소에 초점을 맞추려면 페이지를 가져 오려고합니다. 축소 된 div 내에서 해당 요소를 열고 비어있는 필수 입력란에 초점을 맞 춥니 다. 나는 붕괴 기능을위한 부트 스트랩을 사용하고있다.HTML5 필수, 비어있는 경우 접기 열기 및 포커스가 필요한 요소

양식을 제출하려고 시도했지만 빈 필드가 필요하면 제출하지 않아도되지만 그 이유를 설명 할 항목은 없습니다.

접힌 요소를 열고 양식을 제출하려고 할 때 비어있는 경우 필요한 필드를 초점을 맞추는 방법을 잘 모르겠습니다.

스 니펫의 JavaScript는 JQuery UI 아코디언 용으로, 부트 스트랩 축소 기능을 위해 작동하도록 노력하고 있습니다. 다음은

JSFiddle

는

// 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 등과 같은 몇 가지 다른 질문을 읽고 html로 & CSS입니다 , 필요에 따라 작동하도록 할 수있었습니다.

출처

2016-09-26 Studento919

'javascript'와 관련하여 코딩을 한 적이 있습니까? 그것을 게시하면 – Vikrant

다른'.panel' 엘리먼트 안에'.panel' 엘리먼트가 있습니다. 이것은 실수입니까? – Evochrome

@Vikrant 게시자 : 지금 게시자가 직접 작성한 다른 질문의 코드를 사용하려고 시도했지만 오류가 계속 발생하여 필요한 항목의 줄을 따라 가야합니다. – Studento919

입력에 리스너를 추가하여 유효하지 않은 경우 리스너에게 부모 컨테이너에 열리라고 알려줍니다. 나는 CSS를 업데이트하고 일부 JS를 추가 한)

, 좋은 팔자 '를 직접 코딩을 사용하지 왜

출처

2016-09-26 13:10:01

트리거 이벤트를 추가하려고 시도하고 다음 오류가 계속 발생합니다. 'name =' '인 잘못된 양식 컨트롤은 포커스가 맞지 않습니다.'$ (this) .closest (". collapse-icon"). trigger ("click");'무효 이벤트 리스너 내. – 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>

. 귀하의 필요에 부응하기를 바랍니다.

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 필수, 비어있는 경우 접기 열기 및 포커스가 필요한 요소

답변

관련 문제