title: activate submit button only when all the fields are filled in step wizard form
body: <p>I have a horizontal one page website with multi step forms included in each page with a next button following to redirect to the second page.</p>
  
  <p>I want such that a user can't proceed to the next page until he/she fills all the required fields in the given forms. </p>
  
  <p>Here is the abridged code which have only limited choices for month, year and nationality: </p>
  
  <pre><code>    &lt;div class="step-content hide"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;div class="col-sm-4" id="artle_tellusmore_label_para" style="float:left;"&gt;
                  &lt;label id="artle_tellusmore_label"&gt;Date of Birth&lt;/label id="artle_tellusmore_label"&gt;
                  &lt;label id="artle_tellusmore_label"&gt;Gender&lt;/label&gt;
  
                  &lt;hr&gt;
                  &lt;div style="margin-left: 38px;" id="artle_tellusmore_profileimageupload"&gt;
                      &lt;img style="height: 180px; width:165px;" id="output" src="image/artle_dp_dummy.png"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div style="margin-left: 248px;" class="col-sm-8"&gt;
                  &lt;div id="artle_date_of_birth_combo_box"&gt;
                      &lt;select style="width: 60px;" name="birthday"&gt;
                          &lt;option value=""&gt;-Day-&lt;/option&gt;
                          &lt;option value=""&gt;1&lt;/option&gt;
                          &lt;option value=""&gt;2&lt;/option&gt;
  
                      &lt;/select&gt;
  
                      &lt;select style="width: 91px;" name="birthmonth"&gt;
                          &lt;option value=""&gt;-Month-&lt;/option&gt;
                          &lt;option value=""&gt;January&lt;/option&gt;
                          &lt;option value=""&gt;February&lt;/option&gt; 
                      &lt;/select&gt;
  
                      &lt;select style="width: 67px;" name="birthyear"&gt;
                          &lt;option value=""&gt;-Year-&lt;/option&gt;
                          &lt;option value="2007"&gt;2007&lt;/option&gt;
                          &lt;option value="2006"&gt;2006&lt;/option&gt;
  
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div id="artle_tellusmore_gender_radio_button"&gt;
                      &lt;input class="radio" type="radio"&gt;&lt;span id=""&gt;Male&lt;/span&gt;&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp
  
                      &lt;input class="radio" type="radio"&gt;&lt;span id=""&gt;Female&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div id="artle_tellusmore_phone_number"&gt;
  
                      &lt;input style="width: 223px; margin-top: 10px; height: 33px;" required="" pattern="[0-9]{10}" x-moz-errormessage="Enter a valid phone number" size="10" value="" placeholder="Phone Number" type="tel"&gt;
                  &lt;/div&gt;
  
                  &lt;div id="artle_tellusmore_nationality"&gt;
                      &lt;select name="nationality" style="width: 225px;"&gt;
                          &lt;option value=""&gt;-- Nationality --&lt;/option&gt;
                          &lt;option value="afghan"&gt;Afghan&lt;/option&gt;
                          &lt;option value="albanian"&gt;Albanian&lt;/option&gt;
  
                          &lt;option value="zimbabwean"&gt;Zimbabwean&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div id="artle_tellusmore_state"&gt;
                      &lt;input type="text" value="" placeholder="State" style="width: 223px; height: 33px;" /&gt;
  
                  &lt;/div&gt;
                  &lt;hr&gt;
                  &lt;div id="artle_tellusmore_"&gt;
                      &lt;input type="file" name="file" accept="image/*" onchange="loadFile(event)" id="artistprofileuploadfileField"&gt;
  
                      &lt;p style="margin-top: 15px; font-size: 1.1em;"&gt;You can upload a jpg, gif or png files&lt;/p&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div style="clear:both;"&gt;&lt;/div&gt;
          &lt;button class="next-button btn hide" id="artle_next_button"&gt;Next&lt;/button&gt;
          &lt;input type="submit" class="submit-button btn" id="artle_next_button" value="Done" /&gt;
          &lt;button class="back-button btn" id="artle_next_button"&gt;Back&lt;/button&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>