How to only validate a form when toggled

Question

I have a form with bootstrap toggles for each day of the week. When toggled "yes", a div with two select boxes appears. When toggled "no", the div disappears. This is functioning perfectly, but I want to use JavaScript to validate the form.

However, if one or more of the days are toggled "no", I don't want to validate that section of the form.

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

I have tried multiple suggestions from online mostly using :visible, but I still cant get it to work.

I'm still new to 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">
 <select class="btn btn-default" name="ed_from" id="ed_from" method="post">
 <option disabled selected>From</option>
 <?php for($i = 1; $i < 25; $i++): ?>
 <option value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
 <?php endfor ?>
 </select>
 <select class="btn btn-default" name="ed_to" method="post">
 <option disabled selected>Until</option>
 <?php for($i = 1; $i < 25; $i++): ?>
 <option value="<?= $i; ?>"><?= $i % 12 ? $i % 12 : 12 ?>:00 <?= $i >= 12 ? 'pm' : 'am' ?></option>
 <?php endfor ?>
 </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>

it would be helpful if you edited your code snippet to include a full minimal example so we can see exactly what you are talking about — Andrew Lohr, Dec 19 '17 at 15:25
You need to add jquery to your snippet, and it would be helpful if you made it static (no php loops, maybe just an option or two). — crapier, Dec 19 '17 at 16:13

score 2 · Answer 1 · answered Dec 19 '17 at 16:37

There are many errors in the HTML. method="post" attribute not available for select DOM. Use <form method="POST"></form> element to submit your data. Here is the example but I not used the <form> tag.

HTML Code

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

$('#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/

If you want to try with <form> tag

$( "#target" ).submit(function( event ) {
   event.preventDefault();

   // Add your validation here
   ....
   ....

});

My guess is that he did not provide the full page/form source, but I agree that the form submit event is generally the proper place to do the validation (amusing the next button actually submits instead of doing something like moving to the next part of the form on the same page). Also checking the value of the checkbox (`$('#mycheckbox').val()`) is probably the better method for determining if validation should be done. I'm upvoting your answer over my own. — crapier, Dec 19 '17 at 17:01

crapier · Answer 2 · 2017-12-19T16:48:20.360

You might try to use one of the solutions for checking for visibility from this question.

This is only if you are doing manual validation of some kind. If you are using some library you will need to provide more specifics if you need more help on how to unregister the validation when your submit is pressed.

Edit: More closely match posted snippet.

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

score 0 · Answer 3 · answered Dec 19 '17 at 18:27

Ok after plenty of research I've figured out what I was missing. A lot of the different JavaScript I was trying out was actually perfectly valid and would have worked fine however I discovered the underlying issue was actually with not initializing the bootstrap toggle before running any other JavaScript.

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

http://www.bootstraptoggle.com/

I now have a code that displays the selects and validates them when toggle is on, or hides and does not validate them when the toggle is off.

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

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

How to only validate a form when toggled

3 Answers3