トグル時にのみフォームを検証する方法

Question

毎週の曜日ごとにブートストラップを切り替えるフォームがあります。 "yes"を切り替えると、2つの選択ボックスがあるdivが表示されます。 「いいえ」をトグルすると、divが消えます。これは完全に機能していますが、JavaScriptを使用してフォームを検証したいと考えています。

しかし、1つ以上の日を「いいえ」に切り替えると、フォームのそのセクションを検証する必要はありません。

$('#mycheckbox').change(function() { 
 
    $('#mycheckboxdiv').toggle("fast"); 
 
});

私はオンラインほとんど:visibleを使用してから複数の提案を試してみましたが、私はまだそれが仕事を得る傾けます。

私はまだJavaScriptを初めて使っています。

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> 
 
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
 

 
<input name="everyday" name="mycheckbox" id="mycheckbox" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" value="0"> 
 

 
<div id="mycheckboxdiv" style="display:none"> 
 
\t <select class="btn btn-default" name="ed_from" id="ed_from" method="post"> 
 
\t <option disabled selected>From</option> 
 
\t <?php for($i = 1; $i < 25; $i++): ?> 
 
\t <option value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option> 
 
\t <?php endfor ?> 
 
\t </select> 
 
\t <select class="btn btn-default" name="ed_to" method="post"> 
 
\t <option disabled selected>Until</option> 
 
\t <?php for($i = 1; $i < 25; $i++): ?> 
 
\t <option value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option> 
 
\t <?php endfor ?> 
 
\t </select> 
 
\t <div><label class=" err2 err" id="ed_from_error">Please select your availability</label></div> 
 
\t \t \t \t \t \t <br><br> 
 
\t </div> 
 
      
 
      <div class="form-group"> 
 
\t <input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next"> 
 
\t </div>

Answer 1

あなたはこのquestionからの視認性をチェックするためのソリューションのいずれかを使用してみてください可能性があります。

これは、手動で何らかの種類の検証を行っている場合にのみ表示されます。いくつかのライブラリを使用している場合は、送信が押されたときに検証の登録を解除する方法の詳細が必要な場合は、より詳細な情報を提供する必要があります。

編集：投稿のスニペットにもっと一致します。

// unhide if checkbox is checked on page load (probably not needed) 
 
if ($("#mycheckbox")[0].checked) { 
 
    $("#mycheckboxdiv").show("fast") 
 
} 
 

 
// toggle when checkbox changes 
 
$("#mycheckbox").change(function() { 
 
    $("#mycheckboxdiv").toggle("fast"); 
 
}); 
 

 
// validation 
 
$("#submit").click(function() { 
 
    if ($("#mycheckboxdiv").is(":visible")) { // jquery 
 
    //if ($("#mycheckboxdiv")[0].offsetParent != null) { // non jquery 
 
    // do validation here 
 
    if ($("#ed_to").val() == null || $("#ed_from").val() == null) { 
 
     $("#ed_from_error_1").show("fast"); 
 
     return false; 
 
    } else { 
 
     $("#ed_from_error_1").hide("fast"); 
 
    } 
 
    if ($("#ed_to").val() <= $("#ed_from").val()) { 
 
     $("#ed_from_error_2").show("fast"); 
 
     return false; 
 
    } else { 
 
     $("#ed_from_error_2").hide("fast"); 
 
    } 
 
    } 
 
    // alter just for snippet 
 
    alert("All good"); 
 
    return true; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet"> 
 
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> 
 

 

 
<input name="everyday" name="mycheckbox" id="mycheckbox" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" value="0"> 
 

 
<div id="mycheckboxdiv" style="display:none"> 
 
    <select class="btn btn-default" name="ed_from" id="ed_from" method="post"> 
 
    <option disabled selected>From</option> 
 
    <option value="1">01:00</option> 
 
    <option value="2">02:00</option> 
 
    <option value="3">03:00</option> 
 
    <option value="4">04:00</option> 
 
    </select> 
 
    <select class="btn btn-default" name="ed_to" id="ed_to" method="post"> 
 
    <option disabled selected>Until</option> 
 
    <option value="1">01:00</option> 
 
    <option value="2">02:00</option> 
 
    <option value="3">03:00</option> 
 
    <option value="4">04:00</option> 
 
    </select> 
 
    <div> 
 
    <label class="err2 err" id="ed_from_error_1" style="display:none">Please select your availability</label> 
 
    <label class="err2 err" id="ed_from_error_2" style="display:none">Until must be later than from</label> 
 
    </div> 
 
    <br><br> 
 
</div> 
 

 
<div class="form-group"> 
 
    <input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next"> 
 
</div>

Answer 2

HTMLで多くのエラーがあります。選択DOMではmethod="post"属性を使用できません。データを送信するには<form method="POST"></form>要素を使用してください。ここに例がありますが、私は<form>タグを使用していません。

HTMLコード

<input name="everyday" id="mycheckbox" type="checkbox" value="1" > 

<div id="mycheckboxdiv" style="display:none"> 
    <select class="btn btn-default" name="ed_from" id="ed_from"> 
    <option disabled selected value="">From</option> 
    <option value="1">1:00 AM</option> 

    </select> 
    <select class="btn btn-default" name="ed_to" id="ed_to"> 
    <option disabled selected value="">Until</option> 

    <option value="1">1:00 AM</option> 

    </select> 
    <div><label class=" err2 err" id="ed_from_error">Please select your availability</label></div> 
         <br><br> 
    </div> 

      <div class="form-group"> 
    <input type="submit" class="btn btn-primary btn-lg btn-block" id="submit" method="post" value="next"> 
    </div> 

jQueryのコード

$('#mycheckbox').change(function() { 
    $('#mycheckboxdiv').toggle("fast"); 
}); 

$('#submit').click(function() { 

    if($('#mycheckbox').val()){ 
    if($('#ed_from option:selected').val() == '' || $('#ed_to option:selected').val() == ''){ 
     $('#ed_from_error').show(); 
    }else 
     $('#ed_from_error').hide(); 
    } 

}); 

https://fiddle.jshell.net/LLayz0k3/

あなたは<form>タグ

012で試してみたい場合は

Answer 3

私は何が欠けていたのか理解しています。私が試していたさまざまなJavaScriptは、実際には完全に有効でしたが、うまくいきましたが、基本的な問題は他のJavaScriptを実行する前にブートストラップのトグルを初期化していないことでした。

$('#mycheckbox').bootstrapToggle('off');

http://www.bootstraptoggle.com/

私は今、選択を表示し、トグルがオンになっている、または非表示とトグルがオフのときにそれらを検証していないときにそれらを検証するコードを持っています。

//initialize bootstrap. 
 
$('#mycheckbox').bootstrapToggle('off'); 
 
//Show/Hide div when toggled. 
 
$('#mycheckbox').change(function() { 
 
    $('#mycheckboxdiv').toggle("fast"); 
 
}); 
 

 
$(function availability(){ 
 
    \t $('.err').hide(); 
 
    $("#submit").click(function() { 
 
\t //If toggle is checked: 
 
\t \t if ($('#mycheckbox').prop("checked")){ 
 
    //validate. 
 
\t \t \t var ed_from = $("#ed_from").val(); 
 
\t \t \t if (ed_from == null) { 
 
\t \t  \t $("label#ed_from_error").show(); 
 
\t \t  \t $("#ed_from").focus(); 
 
\t \t  \t document.getElementById('ed_from').style.borderColor = "red"; 
 
\t \t  \t return false; 
 
\t \t \t }else{ 
 
\t \t \t \t if (ed_from != null) { 
 
\t \t \t \t document.getElementById('ed_from').style.borderColor = "green"; 
 
\t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
    \t }); 
 
});