Question

我有一个简单的输入参数是必需的。我想禁用我的提交按钮，直到所有必填字段都得到满足。当然，我是django的新手，并且我正在使用的特定代码非常古老。结果，像this或this之类的帖子没有帮助。

我正在尝试从链接的其中一篇帖子中尝试使用的当前代码，包括我自己的模板

<script type="text/javascript">
$(document).ready(function() {
  validate();
  $('input').on('keyup', validate);
});

function validate() {
  var inputsWithValues = 0;

  // get all input fields except for type='submit'
  var myInputs = $("input:not([type='submit'])");

  myInputs.each(function(e) {
    // if it has a value, increment the counter
    if ($(this).val()) {
      inputsWithValues += 1;
    }
  });

  if (inputsWithValues == myInputs.length) {
    $("input[type=submit]").prop("disabled", false);
  } else {
    $("input[type=submit]").prop("disabled", true);
  }
}


$('#submit').on('click', function() {
    var zip = $('#zip').val();
    var email = $('#email').val();
    var name = $('#name').val();

    //if inputs are valid, take inputs and do something
});

<form class="form-horizontal" action="" method="get" id="dataform">
    <div class="form-group">
        <div class="container">
            <div class="row">
                <div class="col-md-offset-2 col-md-3">
                    <input class="col-md-12" id="zip" type="text" placeholder="Enter zip code" aria-required="true">
                </div>
                <div class="col-md-3">
                    <input class="col-md-12" id="name" type="text" placeholder="Enter last name" aria-required="true">
                </div>
                <div class="col-md-3">
                    <input class="col-md-12" id="email" type="email" placeholder="Enter email address" aria-required="true">
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="btn btn-primary" id="submit" type="submit">Submit</div>
        </div>
    </div>
</form>

在不验证/填写输入字段之前禁用我的提交按钮的任何帮助都将受到赞赏。再次，这是django的新手，我无法使用有关该主题的现有线程

Answer 1

从您当前的代码看来，您用于提交输入的选择器实际上并未获得提交“按钮”。当前，您的模板将提交定义为div而不是input，因此您的选择器应为$("div[type=submit]")而不是$("input[type=submit]")

更好的是，只需按div ID $('#submit')

进行选择

Answer 2

我不是针对属性，而是针对道具。以下是针对我的特定问题的修复程序。

if (inputsWithValues === 3) {
    $("div[type=submit]").attr("disabled", false);
  } else {
    $("div[type=submit]").attr("disabled", 'disabled');
  }

Django，JS / JQuery验证输入并禁用提交按钮

2 个答案: