Question

我一直在寻找，但没有发现任何对我有用的东西。我试图阻止用户发送不完整的表单。我已经禁用＆＃34;提交＆＃34;默认情况下，目的是删除＆＃34;禁用＆＃34;属性，如果已提供所有输入。由于某种原因，提交按钮仍然是禁用的。我相信下面的代码应该可行，但我想我可能会遗漏一些东西。

仅供参考 - 我使用Jquery datepicker和timepicker让用户选择日期和时间。

有人能帮助新手吗？

＆＃13;

<script>
	$(document).ready(function() {
	    $('.field input').keyup(function() {
	
	        var empty = false;
	        $('.field input').each(function() {
	            if ($(this).val().length == 0) {
	                empty = true;
	            }
	        });
	
	        if (empty) {
	            $('.actions input').attr('disabled', 'disabled');
	        } else {
	            $('.actions input').removeAttr('disabled');
	        }
	    });
	});
	
</script>


  <div>

	<form class="form" name="frm1"  method="POST"> 
	
	    <div class='field'>
	      <label for="datepicker">Day:</label>
	      <input type="text" name="txtDate" id="datepicker"> </br>
	    </div>
	    
	    <div class='field'>
	      <label for="fromtime">From:</label>
	      <input type="text" name="txtStartTime" id="fromtime"></br>
	    </div>
	      
	    <div class='field'>
	      <label for="totime">To:</label>
	      <input type="text" name="txtEndTime" id="totime"></br>
	    </div>
	    
	    <div class='droppies'>
	    	    <label for="level">Level</label>
		    <select name="level" id="level">
				<option selected value='%'></option>
				<option value='Beginner'>Beginner</option>
				<option value='Intermediate'>Intermediate</option>
				<option value='Advanced'>Advanced</option>
				<option value='%'>Any levels</option>
				
		    </select>
	    </div>
	    
	    <div class='actions'>
	    	<input type="submit" name="submit" value="search" disabled="disabled"> 
	    </div>
   	</form>
	

  </div>

＆＃13;

Answer 1

您可以在html输入中添加必需的内容。

<input type="text" name="txtDate" id="datepicker" required>

Answer 2

我认为您正在使用IE？因为attr disabled不能在那里工作，所以你需要使用：

$('.actions input').prop('disabled', true);

和

$('.actions input').prop('disabled', false);

Answer 3

您遇到的问题是您正在实施的侦听器类型。当你的输入触发了一个keyup时，你只是试图改变你的禁用按钮的状态。如果您使用点击更改日期，这是您的jquery timepicker插件的意图，那么您将不会触发对验证状态的检查。

您应该使用watch来输入元素中的任何更改。

$('.field input').change(function(){ ... logic ...});

Answer 4

使用.filter获取值为''
的元素的数量

在DatePicker选项中使用onSelect来测试日期选择的验证。

注意：使用.prop over .attr。可以使用$(SELECTOR).on('input')。 当<input> or <textarea>元素的值发生更改时，同步触发DOM input事件

试试这个：

＆＃13;

function test() {
  var len = $('.field :input').filter(function() {
    return !$(this).val();
  }).length;
  $('.actions input').prop('disabled', !!len);
}

$(document).ready(function() {
  $('#datepicker').datepicker({
    dateFormat: 'dd-mm-yy',
    onSelect: test
  });
  $('.field input').keyup(test);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" />
<div>
  <form class="form" name="frm1" method="POST">
    <div class='field'>
      <label for="datepicker">Day:</label>
      <input type="text" name="txtDate" id="datepicker">
    </div>
    <div class='field'>
      <label for="fromtime">From:</label>
      <input type="text" name="txtStartTime" id="fromtime">
    </div>
    <div class='field'>
      <label for="totime">To:</label>
      <input type="text" name="txtEndTime" id="totime">
    </div>
    <div class='droppies'>
      <label for="level">Level</label>
      <select name="level" id="level">
        <option selected value='%'></option>
        <option value='Beginner'>Beginner</option>
        <option value='Intermediate'>Intermediate</option>
        <option value='Advanced'>Advanced</option>
        <option value='%'>Any levels</option>
      </select>
    </div>
    <div class='actions'>
      <input type="submit" name="submit" value="search" disabled="disabled">
    </div>
  </form>
</div>

＆＃13;

Fiddle here

如果输入为空jquery，则禁用提交/发布按钮

4 个答案: