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
– Ravi Patel, Commented Oct 23, 2018 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
– Generaldeep, Commented Oct 23, 2018 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
– Ravi Patel, Commented Oct 23, 2018 at 19:08

Ravi Patel · Accepted Answer · 2018-10-23 19:10:24Z

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, 2018 at 19:10

Ravi Patel

3662 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Generaldeep Over a year ago

no cigar still. Tried changing my if block to if (inputsWithValues === 0) { $("#submit").prop("disabled", true); } else { $("#submit").prop("disabled", false); }

Generaldeep Over a year ago

and button still isn't disabled.

Generaldeep Over a year ago

I'm inside the if block since inputsWithValues === 0 btw

Generaldeep Over a year ago

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

Generaldeep · Accepted Answer · 2018-10-23 20:06:18Z

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, 2018 at 20:06

Generaldeep

4452 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Django, JS/JQuery validate inputs and disable submit button

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related