javascript - Django、JS/JQuery 验证输入并禁用提交按钮

Question

我有一个需要的简单输入参数。我想禁用我的提交按钮，直到所有必填字段都得到满足。当然，我是 django 的新手，而我正在处理的特定代码已经很老了。结果，像这样或这样的帖子没有帮助。

我正在从链接的帖子之一尝试的当前代码，包括我自己的模板

<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 新手，我无法在所述主题上使用现有线程

标签： javascriptjquerydjango

Answer 1

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

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