How to dynamically disable form submit button when using Bootstrap validation - forms

Question

I have a form that is validated using Bootstrap Validator http://1000hz.github.io/bootstrap-validator/.
You don't see the form at first (display: none). When you get to the step where you fill out the form, the Submit button is enabled, although the form is not valid.
However, if I display the form right away, the Submit button is disabled until the form is valid, as I want it to be. Does anyone have idea why is this happening and how to get it to work?
<div id="step0">
Some code here that is visible in the first step
<div class="row">
<button type="button" class="btn btn-primary" onclick="step1();">Go to step 1</button>
</div>
</div>
<div id="step1" style="display: none;">
<form id="forma-klijenta" data-toggle="validator" method="post" action="test.php">
<div class="row">
<div class="col-md-8 col-sm-12 form-right">
<h3> Lični podaci </h3>
<div class="row">
<div class="col-xs-12 form-group col-sm-6">
<input autocomplete="off" class="form-control" id="ime" data-minlength="2" name="ime" placeholder="Ime" required type="text" value=""
pattern="^[A-ZŠĐČĆŽa-zšđčćž]([-' ]?[A-ZŠĐČĆŽa-zšđčćž])+$"data-error="Ime je obavezno. Dozvoljeni specijalni karakteri su - i '." />
<div class="help-block with-errors"></div>
</div>
</div>
</div>
</div>
<div class="row form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<!-- Kraj forme za unos podataka -->
</div>

Answer 1

This is how I worked around this:
Removed style="display: none;"
Added jQuery
$(document).ready(function(){
$("#step1").hide();
});