JQuery modal ask before submit

Question

I have form where user will type his name(required), dob(not required) and before submit the form, there is a confirmation that indicated whether if he/she is sure to submit the form without dob. I am using a modal from there it will submit above form. I have try to run my code below but I cannot see the problem why isn't working. When there is no value in dob then the modal should ask and says "there is no dob is it okay to proceed?" If user click the submit button then it should submit above form which is out of modal. I hope you guys help me. thank you.

HTML

<form id="createexperience" class="intro-message" method="post" action="./createexperience.php" enctype="multipart/form-data">
   <div class="form-group label-floating is-empty">
       <input type="text" name="name" required data-msg-required="Please enter your name">  
   </div>
   <div class="form-group label-floating is-empty">
       <input type="text" id="namefield" name="dob">  
   </div>
   <div class="form-group margin18 padbtm30">
   <input type="submit" class="btn btn-primary" value="Submit" />
   </div>
</form>

<div id="portfoliomsgmodal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3 class="modal-title">TIP</h3> </div>
        <div class="modal-body">
                <label>There are twice as much chances of you getting contacted by your customers if you upload something in your portfolio. Upload photos or video or audio links to your profile.</label>
        </div>
        <div class="modal-footer">
            <input type="submit" class="btn btn-warning" data-dismiss="modal" value="Now">
            <input type="submit" id="submitlater" class="btn btn-primary nomargin" value="Later">
        </div>
    </div>
</div>
</div>

Jquery

$(document).bind("click", function (e) {
    $("#createexperience").validate({
        rules: {
            "language[]": {
                required: !0
            }
        }
        , messages: {}
        , submitHandler: function () {
            return !1
        }
        , ignore: ".ignore"
        , errorElement: "label"
        , errorClass: "has-error"
        , submitHandler: function (e) {
            if ($.trim($('#namefield').val()) == '') {
                if (jQuery('#submitlater').data('clicked')) {
                    $('#createexperience').submit();
                    e.submit();
                }
                else {
                    $('#portfoliomsgmodal').modal('show');
                    return false;
                }
            }
            else {
                e.submit();
            }
        }
        , highlight: function (e) {
            $(e).closest(".form-group").removeClass("success").addClass("has-error")
        }
    })
})

Answer 1

Your submitHandler function is wrong. Try this code hope it works.

$(document).bind("click", function (e) {
    $("#createexperience").validate({
        rules: {
            "language[]": {
                required: !0
            }
        }
        , messages: {}
        , submitHandler: function () {
            return !1
        }
        , ignore: ".ignore"
        , errorElement: "label"
        , errorClass: "has-error"
        , submitHandler: function (e) {
            if ($.trim($('#namefield').val()) == '') {
               $('#portfoliomsgmodal').modal('show');
               $('#submitlater').click(function () {
                  e.submit();
               });
           } else {
             e.submit();
           }
        }
        , highlight: function (e) {
            $(e).closest(".form-group").removeClass("success").addClass("has-error")
        }
    })
});