HTML5が必要です。空の場合は折り畳みを開き、必要な要素をフォーカスします。

空の要素にフォーカスを移そうとしています。折りたたまれたdiv内でその要素を開き、空の必須フィールドにフォーカスする場合です。私は崩壊機能のためにブートストラップを使用しています。HTML5が必要です。空の場合は折り畳みを開き、必要な要素をフォーカスします。

現時点では、フォームを送信しようとしたときに空の必須フィールドがある場合、送信されることはありませんが、理由は何も記載されていません。

折りたたまれた要素を開いて、フォームが送信されようとしたときに空白だった場合は、必要なフィールドにフォーカスする方法がわかりません。

スニペットのJavaScriptは、JQuery UIアコーディオンのためのもので、ブートストラップの折りたたみ機能のために動作するようになっています。以下は

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 
 
\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

入力にリスナーを追加して無効にしてから、親コンテナに開くように指示します。私はCSSを更新し、いくつかのJSを追加しました）

、いくつかの古き良き自分でコーディングを使用しないのはなぜ

出典

2016-09-26 13:10:01

トリガーイベントを追加しようとしましたが、次のエラーが表示されていました： 'name = ''の無効なフォームコントロールはフォーカスできません。）; '無効なイベントリスナー内。 – 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が必要です。空の場合は折り畳みを開き、必要な要素をフォーカスします。

答えて

関連する問題