如何在切换时仅验证表单

问题描述 投票：0回答：3

我有一个表格，每周的每一天都有自助切换。切换“是”时，会出现一个带有两个选择框的div。当切换“否”时，div消失。这是完美的功能，但我想使用JavaScript来验证表单。

但是，如果一天或多天被切换为“否”，我不想验证表单的那一部分。

$('#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">
	<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>
javascript
3个回答
2
投票

HTML中有许多错误。 method="post"属性不适用于选择DOM。使用<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>标签

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

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

});
0
投票

您可以尝试使用其中一个解决方案来检查此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>
0
投票

经过大量研究后，我发现了我所缺少的东西。我尝试过的许多不同的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(){
   	$('.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";
			  	
			  	}
			}
		}
  	});
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.