Jquery Validator custom rule not working when Bootstrap modal is not opened

Question

I am trying to create custom validation for my form but it doesnt seem to work when bootstrap modal is not opened

here is my form

 <form action="{% url 'seller_details' %}" method="post" id="seller_details">
      {% csrf_token %}
<input type="button" value="SELECT" data-toggle="modal" data-target="#catmodal" name="select_brand"></td></tr>
              <!-- Modal -->
              <div id="catmodal" class="modal fade" role="dialog">
                <div class="modal-dialog" style="width:1000px">
                  <!-- Modal content-->
                  <div class="modal-content"style="height: 600px">
                    <div class="modal-header text-center">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Select Brand & Category</h4>
                    </div>
                    <div class="modal-body">

                      <div class="modal-left">
                        <ul>
                          <div class="heading">Brands</div>
                            <li><input type="radio" value="spykar" name="brand" onclick="getCategories(event)">spykar</li>

                            <li><input type="radio" value="Madame" name="brand" onclick="getCategories(event)">Madame</li>

                            <li><input type="radio" value="KidsBerry" name="brand" onclick="getCategories(event)">KidsBerry</li>


                            <li><input type="radio" value="Park Avenue" name="brand" onclick="getCategories(event)">Park Avenue</li>

                            <li><input type="radio" value="Numero Uno" name="brand" onclick="getCategories(event)">Numero Uno</li>


                          </ul>
                        </div>

                       <div class="modal-right">
                         <ul>
                           <div class="heading">Categories</div>
                           <div id="categories">
                           </div>
                         </ul>
                       </div>
                     </div>
                     <input type="submit" value="submit" id="brand_category">
                   </div>
                 </div>
               </div>
             </div>
             <tr><td></td><td><input type="submit" value="submit" style="width:28%; margin-left:5px;"></td></tr>
           </table>
        </div>
      </form>

here is my custom validation method

$.validator.addMethod("select_brand", function(value, element) {
     var brand = $('input[name="' + element.name + '"]:checked').length > 0;
     console.log(brand)
     return brand
}, "Must Select Brand");

here is the validate function

 $("#seller_details").validate({

        rules: {
            brand :  { select_brand : true },

        },

        messages: {
            select_brand:"Please Select Brand and Category",

        },

   submitHandler: function(form) {
            form.submit();
        }

Problem Here is that the custom validation method works only when the bootstrap modal is opened How can i make the custom validate to work.Thank you