Django, JS/JQuery validate inputs and disable submit button

Question

I have a simple input params that are required. I want to disable my submit button until all the required fields are satisfied. Granted I am new to django, and the particular code I am working on is very old. As a result, post like this or this are not helping.

Current code that I am trying from one of the posts linked and including my own template

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

any help on disabling my submit button until input fields are not validated/filled is much appreciated. Again, new to django and I am unable to use existing threads on said topic

Since you are mentioning Django, I'm assuming you want the Django validation, not just simple client-side validation. This means you will have to submit the form to Django (e.g., ajax) and check the result for errors. To do this each time a character is changed, is very taxing on the server, and should not be done. Maybe (still not the best way) you can run validate() after each field loses focus, but still inefficient. If you can port your Django validation to the client side, that would be best. — Ravi Patel, Oct 23 '18 at 18:57
@ravi, i just need client side validation before i take the input and hit my server. The validation doens't have to be extreme, as long as I can confirm that my inputs have values and the submit button is enabled after that's tine with me — Generaldeep, Oct 23 '18 at 19:00
I see. Well, from your current code, looks like your selector is not actually getting the submit button. Currently, your template defines the submit as a `div`, thus your selectors should be `$("div[type=submit]")` not `$("input[type=submit]")` — Ravi Patel, Oct 23 '18 at 19:08

score 0 · Answer 1 · answered Oct 23 '18 at 19:10

0

From your current code, looks like your selector for the submit input is not actually getting the submit "button". Currently, your template defines the submit as a div and not an input, thus your selectors should be $("div[type=submit]") not $("input[type=submit]")

Better yet, just select by div id $('#submit')

answered Oct 23 '18 at 19:10

Ravi Patel

346
2
8

no cigar still. Tried changing my if block to if (inputsWithValues === 0) { $("#submit").prop("disabled", true); } else { $("#submit").prop("disabled", false); } – Generaldeep Oct 23 '18 at 19:14
and button still isn't disabled. – Generaldeep Oct 23 '18 at 19:14
I'm inside the if block since inputsWithValues === 0 btw – Generaldeep Oct 23 '18 at 19:16
found the solution. if (inputsWithValues === 3) { $("div[type=submit]").attr("disabled", false); } else { $("div[type=submit]").attr("disabled", 'disabled'); } – Generaldeep Oct 23 '18 at 20:05

score 0 · Answer 2 · answered Oct 23 '18 at 20:06

0

Instead of targeting attributes, I was targeting props. Below is the fix for my particular issue.

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

answered Oct 23 '18 at 20:06

Generaldeep

437
2
12
30

Django, JS/JQuery validate inputs and disable submit button

2 Answers2