Sindbad~EG File Manager

<div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item p-2">
          <button type="button" class="nav-link nav_btn_gray " value="1" onclick="jump_step(1)" aria-selected="true">Step 1</button>
      </li>
      <li class="nav-item p-2">
          <button type="button" class="nav-link nav_btn_gray" value="2" onclick="jump_step(2)">Step 2</button>
      </li>
      <li class="nav-item p-2">
          <button type="button" class="nav-link nav_btn_gray " value="3"  onclick="jump_step(3)">Step 3</button>
      </li>
      <li class="nav-item p-2">
          <button type="button" class="nav-link active" value="4">Step 4</button>
      </li>
      <li class="nav-item p-2">
          <button type="button" class="nav-link nav_btn_gray" value="5" onclick="{% if data.cur_step >= 4 %}jump_step(5){% endif %}">Step 5</button>
      </li>
  </ul>
<form action="{{url_for('main.Step4post',abs_id=abs_id,abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s4">
  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 form-group mt-3">
      <table class="table table-bordered" style="text-align:center;">
        <tr>
          <td>Resident in training? <span class="text-danger">*</span><br><label id="misc2-error" class="error" for="misc2"></label></td>
          <td><label><input type="radio" name="misc2" id="misc2" {% if data.misc2 == '1' %}checked{% endif %} value="1"><span class="ml-1">Yes</span></label>
            <label  class="ml-3"><input type="radio" name="misc2" id="misc2" {% if data.misc2 == '0' %}checked{% endif %} value="0"><span class="ml-1">No</span></label></td>
        </tr>

        <tr>
          <td>In private practice? <span class="text-danger">*</span><label id="misc3-error" class="error" for="misc3"></label></td>
          <td><label><input type="radio" name="misc3" {% if data.misc3 == '1' %}checked{% endif %} id="misc3" value="1"><span class="ml-1">Yes</span></label>
            <label  class="ml-3"><input type="radio" name="misc3" id="misc3" {% if data.misc3 == '0' %}checked{% endif %} value="0"><span class="ml-1">No</span></label></td>
        </tr>
        <tr>
                <td>Age of chief author? <span class="text-danger">*</span><br><label id="misc1-error" class="error" for="misc1"></label></td>
                <td><input type="text" class="form-group p-1" name="misc1" id="misc1" value="{{data.misc1 or ''}}"></td>
        </tr>
      </table>
    </div>
  </div>

  <div class="row py-2">
    <div class="col">
      <input type="button" name="Previous" id="Previous" class="btn btn-primary" value="Previous" onclick="move(4,0)" />
    </div>
    <div class="col">
      <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(4,1)" />
    </div>
  </div>
  <input type="hidden" name="user_id" id="user_id" value="{{user_id}}" />
  <input type="hidden" name="abs_id" id="abs_id" value="{{abs_id}}" />
  <input type="hidden" name="abs_type" id="abs_type" value="{{data.abs_type}}" />
   <input type="hidden" name="cur_step" id="cur_step" value="{{ data.cur_step or 0 }}">
  <input type="hidden" name="step" id="step" value="4">
  <input type="hidden" name="is_next" id="is_next" value="1">
</form>
{% block script %}
<script type="text/javascript">
  $("#next").click(function() {
    validation();
  })

  function validation() {
    $("#form_s4").validate({
      rules: {
        misc2: {
          required: true
        },
        misc3: {
          required: true
        },
        misc1:{
            required:true
        }
      }
    });
  }

</script>
{% endblock %}