validation not working in bootstrap data modal

Question

Validation not working.I am using bootstrap Modal to show the users input form and has a confirmation button.I have submitted the first form which calls the validation and modal at the same time.

<form class="form-phone" name="frm" method="post" enctype="multipart/form-data" id="add_name" action="">
    <input type="text" class="form-control" id="ex_model" name="ex_model" required>
    <input type="text" class="form-control" id="ex_serial" name="ex_serial" required>                              
    <button style="width:100% ; margin-top:15px; border-radius:0; font-weight:bold;" type="button"  id="subBtn" class="btn btn-success" data-toggle="modal" data-target="#myModal"  >GET OFFER</button>                   
</form>

Here is the script

<script >   
   $(document).ready(function(){  
        $('#subBtn').click(function() {             
            $("#add_name").validate({
                rules: {
                    ex_model: {
                        required: true,
                        minlength: 8
                    },
                    ex_serial: "required"
                },
                messages: {
                    ex_model: {
                        required: "Please enter  modaldata",
                        minlength: "Your data must be at least 8 characters"
                    },      
                    ex_serial: "Please enter some data"
                }   
            });                 
        });   
    });
</script>    

Answer 1

You don't need to validate this form on submit button click event instead of you can validate that form on $(document).ready(function(){}) itself

$(function(){
    $("#add_name").validate({
        rules: {
            ex_model: {
                required: true,
                minlength: 8
            },
            ex_serial: "required"
        },
        messages: {
            ex_model: {
                required: "Please enter  modaldata",
                minlength: "Your data must be at least 8 characters"
            },      
            ex_serial: "Please enter some data"
        }
    })

    $("#subBtn").on("click", function(){
        if($("#add_name").valid()){
            //alert("success");
            $("#myModal").modal("show");
        } else {
            //alert("Values are not entered");
            //whatever you want to do when values are not entered
        }
        return false;
    });
})

<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>

<form class="form-phone" name="frm" method="post" enctype="multipart/form-data" id="add_name" action="">
        <input type="text" class="form-control" id="ex_model" name="ex_model" required>
        <input type="text" class="form-control" id="ex_serial" name="ex_serial" required>                              
        <button style="width:100% ; margin-top:15px; border-radius:0; font-weight:bold;" type="button"  id="subBtn" class="btn btn-success" >GET OFFER</button>                   
</form>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
       </div>
       <div class="modal-body">
           <p>Some text in the modal.</p>
       </div>
       <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       </div>
   </div>
</div>
</div>

Answer 2

Yes you can validate form using below code

$("subBtn").on('click', function() {
   $("#add_name").valid();
});