How to validate Bootstrap modal before dismiss with jQuery validation

Question

I have a form on a Bootstrap modal, which if submitted, it takes the data entered and appends it on to a form behind the modal...

I need these fields to validate before the modal is dismissed. This what I have currently:

Modal:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="false">
                    &times;
                </button>
                <h3 class="modal-title" id="myModalLabel">add Position</h3>
            </div>
            <div class="modal-body">
                <form name="job_pos" class="form-horizontal">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-xs-12">
                            <div class="form-group">
                                <div class="controls">
                                    <label for="current_profession" class="col-sm-3 control-label">Job Title</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" required name="job_title" id="job_title" placeholder="Job Title">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <label for="years_of_experience" class="col-sm-3 control-label">Time Period</label>
                                    <div class="col-sm-9">
                                        <div class="control-group">
                                            <div class="form-group row">
                                                <div class="col-xs-8">
                                                    <div class="input-group input-daterange" id="dp3" data-date="12/02/2012" data-date-format="mm/dd/yyyy">
                                                        <input class="form-control"id="from" name="from" type="text" readonly="" value="12/02/2012">
                                                        <span style="width: 20px;" class="input-group-addon">to</span>
                                                        <input class="form-control" name="to" id="to" type="text" readonly="" value="12/02/2012">
                                                        <div class="current-position inline" >
                                                            <input class="form-control"  type="text" name="present" disabled="" value="Present">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-xs-3">
                                                <input type="checkbox" class="still_here" id="still_here" name="still_here" aria-hidden="false">
                                                I currently work here
                                            </div>

                                        </div>
                                        <div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="controls">
                                    <label for="industries" class="col-sm-3 control-label">industries</label>
                                    <div class="col-sm-9">
                                        <select name="industries" id="industries" multiple="" class="form-control">

                                            {% for k, v in industries_list.iteritems() %}

                                            <option value="{{ k }}">{{ v }}</option>
                                            {% endfor %}

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    Close
                </button>
                <button type="button" type="submit" id="save" data-dismiss="modal" class="btn btn-primary">
                    Save
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal --> 

jQuery:

if ($('#myModal').hasClass('in')) {

            $('#myModal').validate({
                ignore : ':hidden:not("#industries")',
                rules : {
                    job_title : {
                        required : true
                    },
                    industries : {
                        needsSelection : true
                    },
                },
            });

        }

Is there a certain method I need to call from the jQuery Validation Plugin?
Can I validate it like this?

UPDATE

I am now targeting the form, but it is still not working.:

$("form[name='job_pos']").validate({
            ignore : ':hidden:not("#industries")',
            rules : {
                job_title : {
                    required : true
                },
                industries : {
                    needsSelection : true
                },
            },
        });

Answer 1

In #myModal change div to form.

Answer 2

You need to target the form. atm you are targeting the modal div #myModal. Add an id attribute to the form element, then change the jquery selector to suit the id of the form.

Ref: http://jqueryvalidation.org/